使用基於垂直滾動的 jquery 添加/刪除類？

Question

所以基本上我想在用戶向下滾動一點並添加另一個類以更改它的外觀后從“標題”中刪除該類。

試圖找出最簡單的方法來做到這一點，但我無法讓它發揮作用。

$(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>

我確定我在做一些非常基本的錯誤。

Answer 1

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

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

小提琴

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

如果您想在用戶向上滾動時“重置”類添加：

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

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

小提琴

編輯：這是緩存標題選擇器的版本 - 更好的性能，因為它不會在每次滾動時查詢 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');
        }
    });
});

小提琴

Answer 2

如果您願意，可以為其添加一些過渡效果：

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;
}

Answer 3

它的我的代碼

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");
        }

    });

});

它的工作正常

Answer 4

這是在滾動期間處理類的純 javascript 示例。

您可能希望節流處理滾動事件，更多的是因為處理程序邏輯變得更加復雜，在這種情況下，來自lodash lib 的throttle派上用場。

如果您正在做 spa，請記住，您需要在不需要時使用removeEventListener清除事件偵聽removeEventListener （例如，在組件的onDestroy生命周期鈎子期間，例如 Vue 的useEffect destroyed() ，或者可能返回useEffect鈎子的函數）反應）。

 const navbar = document.getElementById('navbar') // OnScroll event handler const onScroll = () => { // Get scroll value const scroll = document.documentElement.scrollTop // If scroll value is more than 0 - add class if (scroll > 0) { navbar.classList.add("scrolled"); } else { navbar.classList.remove("scrolled") } } // Optional - throttling onScroll handler at 100ms with lodash const throttledOnScroll = _.throttle(onScroll, 100, {}) // Use either onScroll or throttledOnScroll window.addEventListener('scroll', onScroll)

 #navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 60px; background-color: #89d0f7; box-shadow: 0px 5px 0px rgba(0, 0, 0, 0); transition: box-shadow 500ms; } #navbar.scrolled { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25); } #content { height: 3000px; margin-top: 60px; }

 <!-- Optional - lodash library, used for throttlin onScroll handler--> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script> <header id="navbar"></header> <div id="content"></div>

Answer 5

這個值是有意的嗎？ if (scroll <= 500) { ...這意味着它發生在 0 到 500 之間，而不是 500 和更大。 在原始帖子中，您說“在用戶向下滾動一點之后”

Answer 6

在類似的情況下，由於性能問題，我想避免總是調用 addClass 或 removeClass。 我已將滾動處理程序函數拆分為兩個單獨的函數，根據當前狀態使用。 我還根據這篇文章添加了去抖動功能： https : //developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

        var $header = jQuery( ".clearHeader" );         
        var appScroll = appScrollForward;
        var appScrollPosition = 0;
        var scheduledAnimationFrame = false;

        function appScrollReverse() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition > 500 )
                return;
            $header.removeClass( "darkHeader" );
            appScroll = appScrollForward;
        }

        function appScrollForward() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition < 500 )
                return;
            $header.addClass( "darkHeader" );
            appScroll = appScrollReverse;
        }

        function appScrollHandler() {
            appScrollPosition = window.pageYOffset;
            if ( scheduledAnimationFrame )
                return;
            scheduledAnimationFrame = true;
            requestAnimationFrame( appScroll );
        }

        jQuery( window ).scroll( appScrollHandler );

也許有人覺得這很有幫助。

Answer 7

對於 Android 移動設備 $(window).scroll(function() 和 $(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');
        }
    });

這段代碼對我有用。 希望它會幫助你。

Answer 8

這是基於@shahzad-yousuf 的回答，但我只需要在用戶向下滾動時壓縮菜單。 我使用頂部容器滾動“屏幕外”的參考點來啟動“擠壓”

  <script type="text/javascript">
    $(document).ready(function (e) {
      //position of element
      var scroll_position = $('div.mainContainer').offset().top;
      var scroll_activation_point = scroll_position;
      $(window).on('scroll', function (e) {
        var y_scroll_pos = window.pageYOffset;
        var element_in_view = scroll_activation_point < y_scroll_pos;
        if (element_in_view) {
          $('body').addClass("toolbar-compressed ");
          $('div.toolbar').addClass("toolbar-compressed ");
        } else {
          $('body').removeClass("toolbar-compressed ");
          $('div.toolbar').removeClass("toolbar-compressed ");
        }
      });

    });   </script>