通过添加类

Question

制作部分坚持顶部我试图创建一个页面，当每个部分到达窗口的顶部，它将添加一个粘性类到元素，它将固定到页面的顶部。

我试图让最终的结果看起来像一堆是来和留在窗口

顶页这是到目前为止我的代码： -

$(document).ready(function(){ 
 
     var stickyTopSection = $('.home, .about, .gallery, .contact').offset().top; 
 
    var stickyTop = function(){ 
 
     var scrollTop = $(window).scrollTop(); 
 
     if (scrollTop > stickyTopSection) { 
 
       $(this).addClass('sticky'); 
 
      } else { 
 
       $(this).removeClass('sticky'); 
 
      } 
 
     }; 
 

 
     stickyTop(); 
 

 
     $(window).scroll(function() { 
 
      stickyTop(); 
 
     }); 
 
});

.home, .about, .gallery, .contact{ 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 

 
.sticky{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.home{ 
 
    z-index: 1; 
 
    background-color: #fff; 
 
} 
 

 
.about{ 
 
    z-index: 2; 
 
    background-color: #eee; 
 
} 
 

 
.gallery{ 
 
    z-index: 3; 
 
    background-color: #ddd; 
 
} 
 

 
.contact{ 
 
    z-index: 4; 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<header id="home" class="home"> 
 
       <h1>Welcome</h1> 
 
      </header> 
 

 
      <section id="about" class="about"> 
 
       <h2>About</h2> 
 
      </section> 
 

 
      <section id="gallery" class="gallery"> 
 
       <h2>Gallery</h2> 
 
      </section> 
 

 
      <section id="contact" class="contact"> 
 
       <h2>Contact</h2> 
 
      </section>

Answer 1

你需要逐个检查每个元素，并且你有什么不会这样做。试试这个...

var stickyTopSections = $('.home, .about, .gallery, .contact'); 

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

    stickyTopSections.each(function() { 
     var $this = $(this); 
     if (scrollTop > $this.offset().top) { 
      $this.addClass('sticky'); 
     } 
     else { 
      $this.removeClass('sticky'); 
     } 
    }); 
}; 

stickyTop(); 

$(window).scroll(function() { 
    stickyTop(); 
}); 

stickyTopSections是元素的集合，所以每个都可以独立解析，因此使用的.each()。

Answer 2

考虑使用position: sticky，它旨在解决这个问题。它的支持是quite good，但如果它不够用，你可以使用this great polyfill。

Answer 3

我试着用这个其他的jQuery，这是你需要什么？

function isElementInViewport (el) { 
 
     //special bonus for those using jQuery 
 
     if (typeof jQuery === "function" && el instanceof jQuery) { 
 
     el = el[0]; 
 
     } 
 
     var rect = el.getBoundingClientRect(); 
 
     return (
 
     rect.top >= 0 && 
 
     rect.left >= 0 && 
 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
 
    ); 
 
    } 
 
\t 
 
$(document).on("scroll", function() { 
 
     //console.log("onscroll event fired..."); 
 
     // check if the anchor elements are visible 
 
\t 
 
     $(".common").each(function (idx, el) { 
 
\t \t var scrollTop = $(window).scrollTop(); 
 
     if (isElementInViewport(el)) { 
 
      // update the URL hash 
 
\t \t $(this).addClass('sticky'); 
 
     } 
 
\t \t else { 
 
\t \t \t $(this).removeClass('sticky'); 
 
\t \t } 
 
\t \t 
 
     }); 
 
});

.common { 
 
\t width:100%; 
 
\t height:100vh; 
 
} 
 
.home { 
 
\t background:#666; 
 
} 
 
.about { 
 
\t background:#999; 
 
} 
 
.gallery { 
 
\t background:#990; 
 
} 
 
.contact { 
 
\t background:#06C; 
 
}

<div class="home common"></div> 
 
<div class="about common"></div> 
 
<div class="gallery common"></div> 
 
<div class="contact common"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>