通過添加類

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>