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

示例： please see screenshot

我还做了一些 css 更改，例如在顶部或边距上添加填充， 但我对结果感觉不够舒适。

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

i want like this kind of result.

Answer 1

只需在crollTop: target.offset().top 之后添加标题高度，就像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;
    }
  }
});
});