javascript – 滚动锚定并修复导航

2019年8月6日 137次阅读

我正在尝试在滚动到锚点时修复导航链接的导航.

固定东西滚动到锚点不是问题.

问题是我的导航几乎就在屏幕的底部.那么如果你向下滚动导航会得到一个固定的类会发生什么.然后单击锚链接时,脚本会滚动到远离锚点块.我尝试将导航偏移到导航的高度.这可行,但只有当您在同一链接上再次单击时才有效.第一次单击锚链接仍然会使链接滚动太远！

我创建了一个小提琴来解释发生了什么 – > Fiddle

我个人认为,滚动和同时固定导航是相互干扰的.

有谁知道是什么原因引起的？

我有的是这个：

<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);
});

最佳答案 试试这个.

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>

现在,在else上,你可以按照标题的大小调整-220动态,然后再修复它后固定它的标题大小.

就像我在评论中告诉你的那样,事实上你正在从身体上移除标题并修复它,减少了每个部分的滚动顶部.

您还可以选择在标题修复时添加占位符,这样您就可以防止数学混乱.

点赞