第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

粘性導(dǎo)航欄，滾動到第一個元素不精確

粘性導(dǎo)航欄，滾動到第一個元素不精確

德瑪西亞99 2023-02-17 17:37:23
我正在嘗試制作一個在滾動到第一個元素（導(dǎo)航）（例如“新聞”）后保持在頂部的導(dǎo)航欄。它通過點(diǎn)擊“新聞”來工作不精確。它向下滾動很多，再次點(diǎn)擊“新聞”后，它再次向上滾動到正確的位置。奇怪的是，它只發(fā)生在導(dǎo)航欄的第一個元素上。我怎樣才能解決這個問題？//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貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個贊

您需要將其更改為 JS/JQuery，在我的例子中是 JQuery。加上這個腳本，你就會有更多的控制權(quán)，換成毫秒就可以做出動畫了, 0。請注意，我正在從容器位置中減去導(dǎo)航欄高度。


$(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;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!---------------------------------------------------Header--------------------------------------------------->

<div class='headBG posRel' id='home'>

  <div class='pTop-4 pLeft-10'>

    <img class='floatLeft roundedBorader' src='https://pbs.twimg.com/media/EaZSuXXXkAAMtJ5?format=jpg&name=360x360' height="150" width="150"/>

    <div class='centerHeadLine pLeft-25'>

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

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

    </div>

  </div>

  <!--NAV-->

  <div class="navbar fitWidth" id="navbar">

      <a class="active" href="#home">Home</a>

      <a class="" href="#news">News</a>

      <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>

    <div class="dropdown">

      <button class="dropbtn">About 

        <i class="fa fa-caret-down"></i>

      </button>

      <div class="dropdown-content">

     <!-- //TODO: Modals als POP up einbauen, mit jeweiligen content -->

        <a href="#">Link 1</a>

        <a href="#">Link 2</a>

        <a href="#">Link 3</a>

      </div>

    </div> 

  </div>

</div>

<!---------------------------------------------------Content-------------------------------------------------->

<div class='contentBody'>

  <!--News-->

   <div class='news' id="news">


      <h1 class='a centerText pTop-5 mTop-5'>News</h1>

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


    <div class='alignBox'>

      <div class='leftBox50 alignBox roundedBox'> 

        <div class='centerText'>

          <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>

      </div>

      <div class='rightBox50 alignBox roundedBox'>

        <div class='centerText'>

          <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>        

      </div>  

   </div>

    <div class='alignBox pAll-20' id=''>

      <form action="/action_page.php">

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

        <input type="text" id="lname" name="lname">

        <input type="submit" value="Submit">

      </form>

    </div>

   </div>

  <!--//News-->

  

  <!--Products-->

  <div class='products' id='products'>

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

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

    <div class='leftText pAll-20'>

        <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>    

    <div class='pAll-20'>

      <div class='white pBox1 bgLightGreyX'>

        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>

        <p>Product #1</p>

      </div>

      <div class='white pBox1 bgLightGreyX'>

        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>

        <p>Product #2</p>

      </div>

      <div class='white pBox1 bgLightGreyX'>

        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>

        <p>Product #3</p>

      </div>

      <div class='white pBox1 bgLightGreyX'>

        <img class='pTop-5' src='https://via.placeholder.com/150'/><br>

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

      </div>

     </div>

    <div class='pTop-10 pLR'>

      <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 e</p>

    </div>

  </div>

  <!--//Products-->

  <!--Services-->

  <div class='services' id='services'>

    <h1 class='centerText pTop-5 mTop-5'>tile#1</h1>

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

    

    <div class='pLeft-5 fitContBoxLeft roundedBox'>

      <img class='floatLeft' src='https://via.placeholder.com/50'/><br>

      <div class='floatLeft pLeft-5'>tile#2</div>

    </div>

    

    <div class='pRight-5 fitContBoxRight roundedBox'>

      <img class='floatRight' src='https://via.placeholder.com/50'/><br>

      <div class='floatRight pRight-5'>tile#3</div>

    </div>

    

    <div class='pLeft-5 fitContBoxLeft roundedBox'>

      <img class='floatLeft' src='https://via.placeholder.com/50'/><br>

      <div class='floatLeft pLeft-5'>tile#4</div>

    </div>

    

    <div class='pRight-5 fitContBoxRight roundedBox'>

      <img class='floatRight' src='https://via.placeholder.com/50'/><br>

      <div class='floatRight pRight-5'>tile#5</div>

    </div>

    

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

    <div class=''></div>

  </div>

  <!--//Services-->

  <!--Customers-->

  <div class='customers' id='customers'>

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

    <div class=''></div>

    <div class=''></div>

    <p>jgfjhgfghjf</p>

  </div>

  <!--//Customers-->

  <!--Community-->

  <div class='' id='Community'>

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

    <div class=''></div>

    <div class=''></div>

  </div>

  <!--//Community-->

  <!--Contact-->

  <div class='' id='Contact'>

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

    <div class=''></div>

    <div class=''></div>

  </div>

  <!--//Contact-->

  <!--About-->

  <div class='aboutUs'>

    <div></div>

  </div>

  <!--//About-->

</>

<!---------------------------------------------------Footer--------------------------------------------------->

<div class='footerBox'>

  <div></div>

</div>


查看完整回答
反對 回復(fù) 2023-02-17
?
天涯盡頭無女友

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個贊

當(dāng)您使用 轉(zhuǎn)換元素時position: fixed;，該元素將停止發(fā)生。因此，您需要補(bǔ)償導(dǎo)航欄不再占用的高度不足。



查看完整回答
反對 回復(fù) 2023-02-17
  • 2 回答
  • 0 關(guān)注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號