jQuery在滾動元素時在滾動時添加類

我們使用一些jQuery來使頁面上的某個點變得粘滯，併爲頁面上的段添加活動類。目前該類是從給定的高度添加到頂部（645）。但我想在用戶滾動給定元素時添加該類，以便我們不需要添加給定高度。這是因爲每個頁面的高度都是可變的。jQuery在滾動元素時在滾動時添加類

如何通過添加此jQuery代碼來解決此問題？

代碼：

<script> 
$j(window).scroll(function(){ 
    var sticky = $j('.menu-header-product'), 
     scroll = $j(window).scrollTop(); 

    var elementOffset=jQuery("#productnav").offset();  
    if (scroll >= elementOffset.top - 57) sticky.addClass('sticky'); 
    else sticky.removeClass('sticky'); 
}); 
$j(window).scroll(function(){ 
    var sticky = $j('.content'), 
     scroll = $j(window).scrollTop(); 

    var elementOffset=jQuery("#productnav").offset();  
    if (scroll >= elementOffset.top - 57) sticky.addClass('sticky'); 
    else sticky.removeClass('sticky'); 
}); 
    $j(document).ready(function() { 
     $j(document).on("scroll", onScroll); 

     $j('a[href^="#"]').on('click', function (e) { 
      e.preventDefault(); 
      $j(document).off("scroll"); 

      $j('a').each(function() { 
       $j(this).removeClass('active'); 
      }) 
      $j(this).addClass('active'); 

      var target = this.hash; 
      $jtarget = $j(target); 
      $j('html, body').stop().animate({ 
      'scrollTop': $jtarget.offset().top - 120 /**just subtract the height of the fixed html part */ 
      }, 500, 'swing', function() { 
       window.location.hash = target; 
       $j(document).on("scroll", onScroll); 
      }); 
     }); 
    }); 

function onScroll(event){ 
     var scrollPosition = $j(document).scrollTop(); 
     $j('nav a').each(function() { 
      var currentLink = $j(this); 
      var refElement = $j(currentLink.attr("href")); 
      if (refElement.position().top - 125 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) { 
       $j('nav ul li a').removeClass("active"); 
       currentLink.addClass("active"); 
      } 
      else{ 
       currentLink.removeClass("active"); 
      } 
     }); 
    } 
</script>

來源

2015-01-20 Henk Z

檢索所需的元件的頂部的像素位置，使用JQuery偏移（http://api.jquery.com/offset/）。

改變這一行：

if (scroll >= 645) sticky.addClass('sticky');

這樣：

var elementOffset=jQuery("#YOUR_ELEMENT_ID").offset();  
if (scroll >= elementOffset.top) sticky.addClass('sticky');

編輯：

如果你的主標題的高度是固定的，加上這個，你定義elementOffset

elementOffset.top=elementOffset.top-57;

後

Othe rwise，檢索您的標題的高度，並按照以下方式從elementOffset.top中減去該值：

headerHeight=jQuery("#HEADER_ID").height();

來源

2015-01-20 22:53:22

太棒了！ :)但我們已經有一個高度爲57px的標題。那麼我該如何解決這個問題呢？ – 2015-01-20 23:02:49

我不明白你的問題。請重新說明你的問題。如果你會發布一些你的HTML代碼也會有所幫助。 – 2015-01-20 23:07:51

那麼在頁面上，我們確實有一個主標題和整個網站的導航菜單。此標頭已修復。所以當滾動和滾動元素時，這個變量也會固定在主標題下。這個主標題的高度爲57px。因此，通過添加這個元素，當整個主標題滾動到元素上時，元素變得粘滯。但是我希望它在主標題的底部碰到元素時變得粘稠。 – 2015-01-20 23:13:52

jQuery在滾動元素時在滾動時添加類

回答

相關問題