首页猿问粘性导航栏，滚动到第一个元素不精确

粘性导航栏，滚动到第一个元素不精确

JavaScript

德玛西亚99 2023-02-17 17:37:23

我正在尝试制作一个在滚动到第一个元素（导航）（例如“新闻”）后保持在顶部的导航栏。它通过点击“新闻”来工作不精确。它向下滚动很多，再次点击“新闻”后，它再次向上滚动到正确的位置。奇怪的是，它只发生在导航栏的第一个元素上。我怎样才能解决这个问题？//Sticky-NavBarwindow.onscroll = function() {stickyNavBar()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function stickyNavBar() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); }}

查看完整描述

2 回答

qq_花开花谢_0

TA贡献1835条经验获得超7个赞

您需要将其更改为 JS/JQuery，在我的例子中是 JQuery。加上这个脚本，你就会有更多的控制权，换成毫秒就可以做出动画了, 0。请注意，我正在从容器位置中减去导航栏高度。

$(document).ready(function(){

$("#navbar a").click(function(e) {

e.preventDefault();

$('html, body').animate({

scrollTop: $($.attr(this, 'href')).offset().top - $("#navbar").height()

}, 0);

});

//Sticky-NavBar

window.onscroll = function() {stickyNavBar()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function stickyNavBar() {

if (window.pageYOffset >= sticky) {

navbar.classList.add("sticky")

} else {

navbar.classList.remove("sticky");

}

$(document).ready(function(){

$("#navbar a").click(function(e) {

e.preventDefault();

$('html, body').animate({

scrollTop: $($.attr(this, 'href')).offset().top - $("#navbar").height()

}, 0);

});

/*Base*/

.contentBody{

background-color: white;

}

/*Sections*/

html {

scroll-behavior: smooth;

}

#header{}

#news{}

#products{background-color: aqua;}

#services{}

#customers{}

#community{}

#contact{}

#about{}

#footer{}

/*Width Element*/

.fitWidth{

width: -webkit-fill-available;

}

.width100{

width: 100%;

}

.fitContBoxLeft{

display: inline-block;

float: left;

}

.fitContBoxRight{

display: inline-block;

float: right;

}

/**/

/*Borders*/

.roundedBorader{

border-radius: 50%;

}

.roundedBox{

border: 1px solid lightgrey;

border-radius: 12px;

}

/*Div*/

.headingBox{

position: relative

background-color: lightgrey;

height: 268;

}

.news{

background-color: purple;

}

.products{

background-color: white;

}

.services{

background-color: limegreen;

}

.customers{

background-color: blue;

}

.pBox1{

float:left;

width: 24.7%;

margin: 1px;

border-radius: 5px;

text-align: center;

}

.headBottomLine{

height: 12%;

width: 100%;

background-color: grey;

}

.leftBox50{

height: auto;

float: left;

background-color: white;

width: 49%;

margin: 2px;

}

.rightBox50{

height: auto;

float: left;

background-color: white;

width: 49%;

margin: 2px;

}

.bodyBox{

height: 200px;

background-color: grey;

}

.aboutUs{

height: 200px;

background-color: white;

}

.footerBox{

min-height: 300px;

background-color: black;

}

/*Backgrounds*/

.headBG{

background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/double-bubble.png");

background-size: cover;

}

/*Position*/

.bottom0{

bottom: 0;

}

.posRel{

position: relative;

}

.posAbs{

position: absolute;

}

/*Float*/

.floatLeft{

float: left;

}

.floatRight{

float: right;

}

/*Alignment*/

.justiText{

text-align: justify;

}

.rightText{

text-align: right;

}

.leftText{

text-align: left;

}

.centerText{

text-align: center;

}

.alignBox{

display: flex;

justify-content: center;

}

/*Padding*/

.pAll-5{

padding: 5%;

}

.pTop-8{

padding-top: 8%;

}

.pTop-5{

padding-top: 5%;

}

.pTop-2{

padding-top: 2%;

}

.mTop-n3{

margin-top: -3%;

}

.mTop-5{

margin-top: auto;

}

.mTop-6{

margin-top: 6%;

}

.pLine{

width:100%;

}

.pLR{

padding-left: 5%;

padding-right: 5%;

}

.pBot-12{

padding-bottom: 12%;

}

.pTop-10{

padding-top: 10%;

}

.pTop-6{

padding-top: 6%;

}

.pTop-1{

padding-top: 2%;

}

.pLeft-30{

padding-left: 30%;

}

.pLeft-25{

padding-left: 25%;

}

.pLeft-20{

padding-left: 20%;

}

.pLeft-10{

padding-left: 10%;

}

.pLeft-5{

padding-left: 5%;

}

.pRight-5{

padding-right: 5%;

}

.pTop-4{

padding-top: 4%;

}

.pAll-20{

padding: 20px;

}

.pLTRB{

padding-left: 15%;

padding-top: 2%;

padding-bottom: 5%;

}

.centerHeadLine{

padding-bottom: 7%;

}

/*Colors*/

.white{

color: white;

}

.black{

color: black;

}

.grey{

color: grey;

}

.lightgrey{

color: lightgrey;

}

div.c{

color: lightgrey;

}

div.b{

color: white;

}

div.a{

color: black;

}

.bgCol-black{

background-color: black;

}

.bgCol-grey{

background-color: grey;

}

.bgCol-purple{

background-color: #8e42c7;

}

.bgCol-white{

background-color: white;

}

.bgCol-lightgrey{

background-color: lightgrey;

}

.bgCol-limegreen{

background-color: limegreen;

}

.bgLightGreyX{

background-color: #d5d2d670;

}

/*Filter styles*/

.saturate { filter: saturate(3); }

.grayscale { filter: grayscale(100%); }

.contrast { filter: contrast(160%); }

.brightness { filter: brightness(0.25); }

.blur { filter: blur(3px); }

.invert { filter: invert(100%); }

.sepia { filter: sepia(100%); }

.huerotate { filter: hue-rotate(180deg); }

.rss.opacity { filter: opacity(50%); }

/*Heading Colors*/

h1.a{

color: white;

}

h1.b{

color: black;

}

h5.a{

color: white;

}

h4.b{

color: black;

}

h4.a{

color: white;

}

h5.b{

color: black;

}

/*Body*/

body {

margin: 0;

font-size: 20px;

font-family: Arial, Helvetica, sans-serif;

}

/*NavBar*/

.navbar {

overflow: hidden;

background-color: #333;

}

.navbar a {

float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/*Nav-Dropdown*/

.dropdown {

float: left;

overflow: hidden;

}

.dropdown .dropbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

.navbar a:hover, .dropdown:hover .dropbtn {

background-color: #ea8013;

}

.dropdown-content {

display: none;

position: fixed;

background-color: #333;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: white;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color: #94a25c;

}

.dropdown:hover .dropdown-content {

display: block;

}

/* The sticky class*/

.sticky {

position: fixed;

top: 0;

width: 100%;

}

.sticky + .content {

padding-top: 0px;

}

<h1 class='b'>Welcome friends</h1>

<h5 class='b'><u>The spot where we test some html, css and js</u></h5>

</div>

<a class="" href="#products">Products</a>

<a class="" href="#services">Services</a>

<a class="" href="#customers">Customers</a>

<a class="" href="#community">Community</a>

<a class="" href="#contact">Contact</a>

<button class="dropbtn">About

</button>

</div>

<h5 class='a centerText'>Stay tunned with our News</h5>

<h4>Lorem ipsum</h4>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

</div>

<h4>Lorem ipsum</h4>

</div>

<label class='white' for="lname">Newsletter:</label>

</form>

</div>

<h1 class='centerText pTop-6 mTop-5'>Products</h1>

<h5 class='b centerText'>Stay tunned with our products</h5>

<h4>Lorem ipsum</h4>

</div>

<p>Product #1</p>

</div>

<p>Product #2</p>

</div>

<p>Product #3</p>

</div>

<p class='black'>Product #4</p>

</div>

</div>

<h5 class='b centerText'>Stay tunned with our Services</h5>

</div>

</div>

</div>

</div>

<h4 class='centerText pTop-5'>asdfadsf asdf asdf asd f asdfvices</h4>

</div>

<h1 class='a centerText'>Customers</h1>

<p>jgfjhgfghjf</p>

</div>

<h1 class='a centerText'>Community</h1>

</div>

<h1 class='a centerText'>Contact</h1>

</div>

</div>

</>

</div>

反对回复 2023-02-17

天涯尽头无女友

TA贡献1831条经验获得超9个赞

当您使用转换元素时position: fixed;，该元素将停止发生。因此，您需要补偿导航栏不再占用的高度不足。

反对回复 2023-02-17

2 回答
0 关注
167 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

粘性导航栏，滚动到第一个元素不精确

粘性导航栏，滚动到第一个元素不精确

2 回答

添加回答