时间戳

首页 > 解决方案 > 侧边栏在滚动时不活动 - Jquery

javascript - 侧边栏在滚动时不活动 - Jquery

问题描述

我很难用我的代码识别问题，但我非常接近，因为侧边栏确实会暂时处于活动状态，但它不会在滚动时保持活动状态。我希望侧边栏充当 ToC 并在滚动浏览部分时变为活动状态。任何帮助将不胜感激。感谢您的时间和精力！

这是现场直播： https ://www.matthewahn.xyz/cosmo

HTML

<div id="sidenav">
 <ul class="no-bullets">

<li>    <a href="#section-1">Cosmo</a> </li>
<li>    <a href="#section-2">Overview</a> </li>
<li>    <a href="#section-3">Challenge</a> </li>
<li>    <a href="#section-4">How Might We</a> </li>
<li>    <a href="#section-5">Solution</a> </li>
<li>    <a href="#section-6">Project Objective</a> </li>
<li>    <a href="#section-7">Research</a> </li>
<li>    <a href="#section-8">Target Users</a> </li>
<li>    <a href="#section-9">Machine Learning</a> </li>
<li>    <a href="#section-10">Project Design</a> </li>
<li>    <a href="#section-11">User Testing</a> </li>
<li>    <a href="#section-12">Prototype</a> </li>
<li>    <a href="#section-13">Reflections</a> </li>
<li>    <a href="#section-14">Future Improvements</a> </li>

 </ul>
</div>

CSS

ul.no-bullets {
      list-style-type: none;
}


#sidenav {

  right: 0;
  top: 50%;
  transform: translatey(-50%);
  position: fixed;
  z-index: 10000;
  width: 9.375em;

  align-items: center;
  background-color: #fff;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
 -webkit-box-shadow: rgba(0,0,0,0.1) 0 6px 10px;
 -moz-box-shadow: rgba(0,0,0,0.1) 0 6px 10px;
 box-shadow: rgba(0,0,0,0.1) 0 6px 10px;

  padding: 1.5em;
  overflow-x: hidden;
}

#sidenav a {
  
  text-align: right;
  padding-top: 1.2em;
  text-decoration: none;
  font-size: 0.9em;
  color: #ccc;
  display: block;
      transition: all 100ms ease-in-out;
}

#sidenav ul li a.active {
  color: #FF0000;
}

#sidenav a:hover, 
#sidenav a:focus,  {
  color: #000;
}

JS & jQuery

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});



    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('#sidenav a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('#sidenav ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

标签： javascripthtmljquerycss

解决方案

据我了解是：

在使用 refElement 位置检查滚动位置的行中

if (refElement.position().top <= scrollPos ...etc

您真正需要做的是检查偏移量而不是位置。因为，从链接来看，位置是相对于偏移父级的，而偏移量是相对于文档的。

在该站点中，我发现position().top几乎总是返回相同的值。你可以替换使用offset和检查吗？

推荐阅读