При прокрутке страницы добавляет класс

214

05 мая 2018, 16:02

На сайте не нашёл, как можно при прокрутке страницы добавить класс. Вот мой код, нужно, когда я прокрутил 106px - мне добавился класс, ну к примеру custom и наоборот.

<script> 
var h_hght = 106; // высота моей шапки 
var h_mrg = 0;    // отступ, когда шапка уже не видна                 
$(function(){  
    var elem = $('#menu'); //Добавить сюда класс 
    var top = $(this).scrollTop();      
    if(top > h_hght){ 
        elem.css('top', h_mrg); 
    }                 
    $(window).scroll(function(){ 
        top = $(this).scrollTop();          
        if (top+h_mrg < h_hght) { 
            elem.css('top', (h_hght-top)); 
        } else { 
            elem.css('top', h_mrg); 
        } 
    
    });  
}); 
</script>

Answer 1

Ещё один пример, логика работает и после перезагрузки страницы։

$(window).load(function () {
    var h_hght = 106;
    var height = $(window).scrollTop();
    if (height >= h_hght) {
        $('#menu').addClass('custom');
    } else {
        $('#menu').removeClass('custom');
    }

    $(window).scroll(function () {
        var height = $(window).scrollTop();
        if (height >= h_hght) {
            $('#menu').addClass('custom');
        } else {
            $('#menu').removeClass('custom');
        }
    });

});

Answer 2

Если я верно понял то вот так это делается на jQuery

integer - заменить на нужную величину

elem - нужный элемент

new - новый class который надо присвоить

$(window).scroll(function() {     
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= integer) { 
        $("elem").addClass("new"); 
    } else { 
        $("elem").removeClass("new"); 
    } 
});