Question

我有一个固定的标题栏，可以使用锚链接来滚动页面。如果您在该位置，则标题栏中的链接将处于活动状态。基本上，活动类的延迟是75px，因为固定标题的高度为75像素。

如何在函数中添加一些额外的px来补偿？

＆＃13;

$(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();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

＆＃13;

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

＆＃13;

Answer 1

如果我理解正确，那么我想你只需要通过以下行补偿它：

var scrollPos = $(document).scrollTop() + $("#menu-center").height(); //adjusting the scrollPos as per menu height

＆＃13;

$(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() + $("#menu-center").height(); //adjusting the scrollPos as per menu height
  
  $('#menu-center a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > (scrollPos)) {
      $('#menu-center ul li a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.menu {
  width: 100%;
  height: 75px;
  background-color: rgba(0, 0, 0, 1);
  position: fixed;
  background-color: rgba(4, 180, 49, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.light-menu {
  width: 100%;
  height: 75px;
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  background-color: rgba(4, 180, 49, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#menu-center {
  width: 980px;
  height: 75px;
  margin: 0 auto;
}
#menu-center ul {
  margin: 15px 0 0 0;
}
#menu-center ul li {
  list-style: none;
  margin: 0 30px 0 0;
  display: inline;
}
.active {
  font-family: 'Droid Sans', serif;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  line-height: 50px;
}
a {
  font-family: 'Droid Sans', serif;
  font-size: 14px;
  color: black;
  text-decoration: none;
  line-height: 50px;
}
#home {
  background-color: grey;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url(images/home-bg2.png);
}
#portfolio {
  background-image: url(images/portfolio-bg.png);
  height: 100%;
  width: 100%;
}
#about {
  background-color: blue;
  height: 100%;
  width: 100%;
}
#contact {
  background-color: red;
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m1 menu">
  <div id="menu-center">
    <ul>
      <li><a class="active" href="#home">Home</a>

      </li>
      <li><a href="#portfolio">Portfolio</a>

      </li>
      <li><a href="#about">About</a>

      </li>
      <li><a href="#contact">Contact</a>

      </li>
    </ul>
  </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

＆＃13;

将一些px添加到＆＃34;滚动到位置＆＃34;功能

1 个答案: