Question

所以基本上我在我正在处理的页面上有一个侧面导航，我试图将它固定在滚动上并在它到达某个点时取消固定。现在这个问题的目的不仅仅是得到直接答案，我还想解释一下为什么我的代码不起作用。

当我将代码固定到页面时，代码非常好但我希望它在到达页脚部分时取消固定，这就是我有点头疼的地方。

我试过了：

HTML

<div class="header"></div>
<div class="side-nav"></div>
<div>Rest of page content</div>
<div class="footer"></div>

JS

  function pinElement() {
     var products = document.querySelector('.rest-of-page'),
       scroll = window.scrollY,
       nav = document.querySelector('.side-nav'),
       navTop = nav.offsetTop
       header = document.querySelector('.header'),
       offset = header.clientHeight,
       end = products.clientHeight + products.offsetTop; 


       if (scroll >= navTop) {
            nav.style.position = 'fixed';
            nav.style.top = offset;
        } else if (scroll < navTop) {
            nav.style.position = 'relative';
        } else {
            if(scroll >= end){
               nav.style.position = 'relative';
            }
        }
  }        
       document.addEventListener('scroll', pinElement)

现在我遇到它的问题并没有取消，当它到达“结束”变量而不是它滚过它并在底部附近的某处取消。我想了解为什么会发生这种情况并找到解决问题的正确方法。感谢

Answer 1

问题不在于您的条件未达到if(scroll >= end)，因为即使scroll >= navTop也是如此。

如果nav.style.top低于end，应该offset是什么？您的原始条件始终将其设置为nav.style.top = offset;。

当用户滚过end时，将end设置为nav.style.top的顶部，否则，您将offset设置为if (scroll >= navTop && !(scroll >= end)) { nav.style.position = 'fixed'; nav.style.top = offset; } else if (scroll < navTop) { nav.style.position = 'relative'; //You may wish to set nav.style.top here too since it's ambiguous otherwise } if(scroll >= end){ nav.style.position = 'relative'; nav.style.top = end.style.top; //or where ever you want it to be } }。< /强>

public class AutoMapperConfiguration : Profile { private readonly ICloudStorage _cloudStorage; public AutoMapperConfiguration(ICloudStorage cloudStorage) { _cloudStorage = cloudStorage; // Do mapping here } } public void ConfigureServices(IServiceCollection services) { services.AddSingleton<ICloudStorage, AzureStorage>(); services.AddAutoMapper(); // Errors here }

Answer 2

在你的if / else语句中，永远不会达到最后一个条件。我修改了你的代码，以使你的最后一个条件可以访问。

adapter

如何使用js固定和取消固定元素

2 个答案: