基於垂直滾動的jQuery添加/刪除類？

所以基本上我想在用戶向下滾動一小段並添加另一個類來改變它的外觀之後從'標題'中刪除類。基於垂直滾動的jQuery添加/刪除類？

試圖找出這樣做的最簡單的方法，但我不能讓它工作。

$(window).scroll(function() {  
    var scroll = $(window).scrollTop();  
    if (scroll <= 500) { 
     $(".clearheader").removeClass("clearHeader").addClass("darkHeader"); 
    } 
}

CSS

.clearHeader{ 
    height: 200px; 
    background-color: rgba(107,107,107,0.66); 
    position: fixed; 
    top:200; 
    width: 100%; 
}  

.darkHeader { height: 100px; } 

.wrapper { 
    height:2000px; 
}

HTML

<header class="clearHeader"> </header> 
<div class="wrapper">  </div>

我知道我在做一些很基本的錯誤。

來源

2012-09-24 andy

嘗試https://github.com/virgiliud/scrollClass.js – CyberJunkie

113

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    //>=, not <= 
    if (scroll >= 500) { 
     //clearHeader, not clearheader - caps H 
     $(".clearHeader").addClass("darkHeader"); 
    } 
}); //missing);

Fiddle

此外，通過移除clearHeader類，你去除的元素position:fixed;還有通過$(".clearHeader")選擇器重新選擇它的能力。我建議不要刪除該類，並在其上添加一個新的CSS類用於樣式目的。

如果你想「重置」類此外，當用戶滾動備份：

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 500) { 
     $(".clearHeader").addClass("darkHeader"); 
    } else { 
     $(".clearHeader").removeClass("darkHeader"); 
    } 
});

Fiddle

編輯：這裏的版本緩存頭選擇 - 更好的性能，因爲它贏得了每次滾動時都不會查詢DOM，並且可以安全地刪除/添加任何類到標題元素而不會丟失參考：

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".clearHeader"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 500) { 
      header.removeClass('clearHeader').addClass("darkHeader"); 
     } else { 
      header.removeClass("darkHeader").addClass('clearHeader'); 
     } 
    }); 
});

Fiddle

來源

2012-09-24 03:01:39

嗯，我可以添加位置：固定到darkHeader類，這是我的意圖無論如何。現在的問題是我無法在用戶滾動備份後將它們交換回來。 – andy

這是因爲你從選擇器中刪除了該類。當我更新小提琴時，您可以輕鬆地緩存標頭。 –

謝謝，Fab，我的方式也有效，但這是一種愚蠢的做法嗎？ – andy

該值是否打算？ if (scroll <= 500) { ...這意味着它從0到500發生，而不是500和更大。在原來的職位，你說「用戶向下滾動一點之後」

來源

2012-09-24 02:59:33 ido

粗糙的代碼只是爲了讓它工作，實際價值是50. – andy

添加一些過渡效果，如果你喜歡：

http://jsbin.com/boreme/17/edit?html,css,js

.clearHeader { 
    height:50px; 
    background:lightblue; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 

    -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */ 
    transition: background 2s; 
} 

.clearHeader.darkHeader { 
background:#000; 
}

來源

2015-02-13 18:56:26 Marc

它我的代碼

jQuery(document).ready(function(e) { 
    var WindowHeight = jQuery(window).height(); 

    var load_element = 0; 

    //position of element 
    var scroll_position = jQuery('.product-bottom').offset().top; 

    var screen_height = jQuery(window).height(); 
    var activation_offset = 0; 
    var max_scroll_height = jQuery('body').height() + screen_height; 

    var scroll_activation_point = scroll_position - (screen_height * activation_offset); 

    jQuery(window).on('scroll', function(e) { 

     var y_scroll_pos = window.pageYOffset; 
     var element_in_view = y_scroll_pos > scroll_activation_point; 
     var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view; 

     if (element_in_view || has_reached_bottom_of_page) { 
      jQuery('.product-bottom').addClass("change"); 
     } else { 
      jQuery('.product-bottom').removeClass("change"); 
     } 

    }); 

});

其工作精細

來源

2016-10-19 15:35:08

對於Android手機$ （窗口）.scroll（函數（）和$（document）.scroll（function（）可能會或可能不起作用。所以改爲使用以下內容。

jQuery(document.body).scroll(function() { 
     var scroll = jQuery(document.body).scrollTop(); 

     if (scroll >= 300) { 
      //alert(); 
      header.addClass("sticky"); 
     } else { 
      header.removeClass('sticky'); 
     } 
    });

此代碼適用於我。希望它能幫助你。

來源

2018-01-24 11:07:55 user9261696

基於垂直滾動的jQuery添加/刪除類？

回答

相關問題