javascript - 滚动到 anchor 并固定导航

Question

我正在尝试在滚动到 anchor 时固定 anchor 链接的导航。 把东西固定在一个 anchor 上不是问题。

问题是我的导航几乎在屏幕底部。那么如果你向下滚动导航得到一个 fixed 类会发生什么。然后单击 anchor 链接时，脚本会滚动到 anchor block 远处。我尝试将导航偏移到导航的高度。这有效，但仅当您第二次单击同一链接时。第一次点击 anchor 链接仍然会使链接滚动太远!

我创建了一个 Fiddle 来解释发生了什么 -> Fiddle

我个人认为scrollTo和nav同时固定是相互干扰的。

有人知道是什么原因造成的吗？

我的是这样的:

<div class="anchor-links">
    <div class="anchor-wrapper">
        <ul class="nav-list">
            <li><a href="#description" class="goSmoothly">Product information</a></li>
            <li><a href="#bundles" class="goSmoothly">Product bundles</a></li>
            <li><a href="#reviews" class="goSmoothly">Reviews</a></li>
            <li><a href="#related" class="goSmoothly">Related products</a></li>
        </ul>
    </div>
</div>

<div id="description" class="block">description</div>
<div id="bundles" class="block">bundles</div>
<div id="reviews" class="block">reviews</div>
<div id="related" class="block">related</div>

var fixmeTop = $('.anchor-links').offset().top;

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop){
        $('.anchor-links').addClass("sticky");
    } else {
        $('.anchor-links').removeClass("sticky");
    }
});

$('.goSmoothly').click(function(event){     
    event.preventDefault();
    $(this).addClass('active');
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - 100
    }, 500);
});

Answer 1

试试这个。

var fixmeTop = $('.anchor-links').offset().top;

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop){
        $('.anchor-links').addClass("sticky");
    } else {
        $('.anchor-links').removeClass("sticky");
    }
});

$('.goSmoothly').click(function(event){		
    event.preventDefault();
    $(this).addClass('active');
    if( $('.anchor-links').hasClass("sticky")) {
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - 100
    }, 500);
    } else {
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - 220
    }, 500);    
    }
});

.block{
    height:700px;
    background:#eee;
}
.anchor-links {
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  margin-bottom: 20px;
}
.anchor-links .nav-list li {
  display: inline-block;
  line-height: 4.2rem;
}
.anchor-links.sticky {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid #f5f5f5;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img width="400" height="400" alt="Adidas 2 Opties" itemprop="image" class="featured" data-original-url="http://static.webshopapp.com/shops/057743/files/029936946/adidas-2-opties.jpg" src="http://static.webshopapp.com/shops/057743/files/029936946/400x400x2/adidas-2-opties.jpg">
<div class="anchor-links">
    <div class="anchor-wrapper">
        <ul class="nav-list">
            <li><a href="#description" class="goSmoothly">Product information</a></li>
            <li><a href="#bundles" class="goSmoothly">Product bundles</a></li>
            <li><a href="#reviews" class="goSmoothly">Reviews</a></li>
            <li><a href="#related" class="goSmoothly">Related products</a></li>
        </ul>
    </div>
</div>

<div id="description" class="block">description</div>
<div id="bundles" class="block">bundles</div>
<div id="reviews" class="block">reviews</div>
<div id="related" class="block">related</div>

现在，另一方面，您可以在修复前通过 header 的大小减去修复后的 header 大小使 -220 动态化。

就像我在评论中告诉您的那样，您从正文中删除标题并修复它这一事实减少了每个部分的滚动顶部。

您还可以选择在标题固定时添加占位符，这样可以防止数学困惑。