jQuery：使用固定标头平滑滚动

Question

我在顶部固定有标题，当它滚动时，它不应覆盖我的内容或隐藏其中的一些内容。 该部分的顶部。

 //smooth scrolling from css-tricks
$('a[href*="#"]:not([href="#"])').click(function() {

    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);


        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

例子： 请看截图

我也做了一些css更改，例如在顶部或边距上添加了填充，但是我对结果不满意或不满意。

如果可能的话，我希望固定标头的高度为顶部偏移量。

我想要这样的结果。

Answer 1

只需在crollTop: target.offset().top之后添加标头高度，就像crollTop: target.offset().top-100这样就可以了， crollTop: target.offset().top-100此crollTop: target.offset().top-100 。 您需要检查标题高度，然后设置偏移量

 //smooth scrolling from css-tricks $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top-100 }, 1000); return false; } } }); 

 .header { position: fixed; top:0; left: 0; right: 0; background: #000; height: 40px; padding: 20px 40px; } a { color: #fff; float: left; padding: 10px; } .section { height: 400px; background: green; } .section.add { background: red; } .section.add3 { background: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <div class="header"> <a href="#section1">scroll</a> </div> <div class="section"></div> <div class="section add" id="section1"></div> <div class="section add3"></div> 

Answer 2

我只是想出如何解决我的问题。 我创建了变量。

var fixedMenu = $（''＃fixedtopheader“）。height（）：

而是scrollTop：target.offset（）。top-fixedMenu

现在工作正常！

Answer 3

我有代码给你。 检查此链接。 它可能对您有帮助： https : //jsfiddle.net/6mujyLw3/在此，我为您分开了每个部分。 在每个部分中添加填充顶部作为标题的高度。

的HTML

<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">
  <h1>Home </h1>
</div>
<div id="portfolio">
   <h1>Portfolio</h1>
</div>
<div id="about">
  <h1>About</h1>
</div>
<div id="contact">
 <h1>Contact</h1>
</div>

CSS：

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.menu {
  width: 100%;
  height: 75px;   
  position: fixed;
  background-color:rgba(4, 180, 49, 0.9);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index:99999;
}
.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;
padding-top:70px;text-align:center;
}
#portfolio {    
height: 100%;
width: 100%; padding-top:70px;text-align:center;
}
#about {
background-color: blue;
height: 100%;
width: 100%; padding-top:70px;text-align:center;
}
#contact {
background-color: red;
height: 100%;
width: 100%;  padding-top:70px;text-align:center;
}

JS

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
     var target = $(this.hash);
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
     if (target.length) {
       $('html, body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});
});