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() */
      );
    }
	
$(document).on("scroll", function() {
      //console.log("onscroll event fired...");
      // check if the anchor elements are visible
	  
      $(".common").each(function (idx, el) {
		 var scrollTop = $(window).scrollTop();
        if ( isElementInViewport(el) ) {
          // update the URL hash
		  $(this).addClass('sticky');
        }
		else {
			$(this).removeClass('sticky');
		}
		
      });
});

.common {
	width:100%;
	height:100vh;
}
.home {
	background:#666;
}
.about {
	background:#999;
}
.gallery {
	background:#990;
}
.contact {
	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>

通过添加课程使部分粘到顶部

3 个答案: