堆棧內存溢出
  簡體   English   中英

在不使用外部庫的情況下在徽標下創建粘性導航欄

[英]Creating a Sticky Navigation Bar Under a Logo Without the Use of External Libraries

 原文  2017-01-17 03:36:01  9   3    javascript/ html/ css

問題描述

正如標題所暗示的那樣，我有意創建一個在導航欄上方有一個大徽標的網頁。 當頁面向下滾動時，此導航欄將向上移動，直到它鎖定在屏幕頂部的位置。 然后，我希望導航欄下方出現一個較小的徽標並保持鎖定。 我在這個網頁和其他地方搜索了四天的解決方案都沒有成功。 給出的解決方案通常涉及下載 jquery 庫或引導程序庫。 如果可能的話，我不希望使用它們。 這樣做的原因是因為我正在創建這個網頁作為一種學習體驗，而將代碼保存在其他地方會遺漏此時會讓我感到困惑的部分。 所以基本上我想知道它是如何工作的，而不是使用具有庫的簡單復制粘貼方法來完成所有工作。

這是我迄今為止所擁有的，它完全基於此示例： http : //codepen.io/Guilh/pen/JLKbn

HTML：

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The Den</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
<header>
  <table bordercolor="FD0000" align="center" cellspacing="0" cellpadding="0" style="border-color: FD0000; border-width:2px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;">
<tr><td><center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a>
</center></td></tr></table>
</header>
<nav class="main-nav">
  <ul id="main-nav">
    <li><a href="#">Nav Link 1</a></li>
    <li><a href="#">Nav Link 2</a></li>
    <li><a href="#">Nav Link 3</a></li>
    <li><a href="#">Nav Link 4</a></li>
  </ul>
</nav>
<div class="main">
  <h2>Random words to fill in the gap.</h2>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>
    <p>Random words to fill in the gap.</p>

</div>
</body>

CSS：

* {
  box-sizing: border-box;
}
li {
    float: left;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  height: 300px;
  padding-top: 50px;
  background: #f07057;
}
.main-nav,
.main {
  position: relative;
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main {
  background: #f2f2e8;
  padding: 110px 50px 50px;
  column-count: 2;
  column-gap: 40px;
  width: 100%;
}

JS：

var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

我在上面的例子中遇到的問題是它似乎只能在 codepen 頁面上工作。 當我將它從網站上取下並將其保存到記事本 ++ 文檔並打開它時，導航欄突然滾動到其預期位置並完全離開屏幕。 這與我在遇到的所有其他教程中遇到的問題相同。 要么導航欄無法留在屏幕上，要么徽標將成為文本滾動經過的背景，使導航欄卡在徽標上方約 3/4 處。

3 個解決方案

解決方案1
 0  

看看這篇關於這個主題的 CSS 技巧的文章； https://css-tricks.com/scroll-fix-content/這是我自己做過幾次之后的首選示例。

這個代碼示例也很好用：

HTML：

<div class="wrap" id="wrap">

<header class="top-header">
    <span class="menu-icon">☰</span>
  </header>

  <div class="search">
    <input type="search" placeholder="Search or type URL" />
  </div>

  <div class="top">
    <div class="hero"></div>
  </div>

  <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>

</div>

CSS：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.wrap {
  width: 320px;
  border: 1px solid #ccc;
  height: 480px;
  overflow: auto;
  position: relative;
}
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
  .menu-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 18px 20px;
  }
  .fix-search & {
    background: #eee;
  }
}

.search {
  position: absolute;
  top: 155px;
  left: 20px;
  right: 20px;
  input {
    width: 265px;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 15px;
    transition: width 0.2s;
    -webkit-appearance: none;
  }
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

.top {
  height: 250px;
  padding-top: 40px;
}
.hero {
  width: 200px;
  height: 100px;
  background: #ccc;
  margin: 0 auto;
}

main {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    width: 125px;
    height: 80px;
    background: #ccc;
    margin: 0 0 20px 0;
  }
}

JavaScript：

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});

https://codepen.io/chriscoyier/pen/AdaKr

解決方案2
 0  2017-01-17 03:54:10

 <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .affix { top: 0; width: 100%; } .affix + .container-fluid { padding-top: 70px; } </style> </head> <body> <header class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Bootstrap Affix Example</h1> <h3>Fixed (sticky) navbar on scroll, using jQuery</h3> <p>Scroll this page to see how the navbar behaves.</p> <p>The navbar is attached to the top of the page after you have scrolled passed the header element.</p> </header> <nav class="navbar navbar-inverse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Basic Topnav</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav> <div class="container-fluid" style="height:1000px"> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> </div> <script> $(document).ready(function(){ /* affix the navbar after scroll below header */ $(".navbar").affix({offset: {top: $("header").outerHeight(true)} }); }); </script> </body> </html>

解決方案3
 0 已采納  2017-01-17 06:08:46

這無需在別處鏈接。 

 $(function(){ $(window).scroll(function() { if ($(this).scrollTop() >= 290) { $('nav.main-nav').addClass('stickytop'); } else { $('nav.main-nav').removeClass('stickytop'); } }); });
 body { font:16px/1.5 'Raleway',Arial,sans-serif; color:#fff; margin:0; padding:0 } h1 { font-size:50px; font-weight:300; text-align:center; font-weight:700 } span { color:#27ae60; font-weight:700 } h2 { font-size:35px; text-align:left; margin-left:-20px } nav.demo-nav { width:350px; margin:0 auto; display:block } nav.demo-nav a { font-size:19px; display:inline-block; text-align:center; font-family:'Lato',sans-serif; color:#27ae60; font-weight:400; padding:5px 15px; text-transform:uppercase; border-radius:2px; letter-spacing:1px; text-decoration:none; margin-right:10px; border:2px solid #ecf0f1; border-radius:none } nav a.active,nav a:hover { background:#ecf0f1; color:#27ae60 } header { height:250px; background:#2ecc71; padding:23px 0 } nav.main-nav { background:#fff; height:60px; border-bottom:1px solid #dadada; text-align: center; } nav.main-nav a { font-family:'Lato',sans-serif; font-size:20px; text-decoration:none; display:inline-block; padding:15px 19px; color:#27ae60; } .container { display: inline; margin:0 auto; } nav.main-nav.stickytop { position:fixed; top:0 } .content { color:#222; padding:50px; -webkit-column-count:3; /* Chrome, Safari, Opera */ -moz-column-count:3; /* Firefox */ column-count:3; -webkit-column-gap:40; column-gap:40px; } .content h2 { margin:0; } @media all and (min-width: 360px) and (max-width: 480px) { header { padding:5px 0 55px; } nav.main-nav a { font-size:17px; } nav.main-nav { height:55px; } .container { margin:0 auto; width:50%; } .content { -webkit-column-count:1; /* Chrome, Safari, Opera */ -moz-column-count:1; /* Firefox */ column-count:1; } } @media screen and (max-width: 480px) { header { padding:5px 0 55px; } nav.main-nav a { font-size:17px; } nav.main-nav { height:55px; } .container { width:92%; } .content { -webkit-column-count:1; /* Chrome, Safari, Opera */ -moz-column-count:1; /* Firefox */ column-count:1 } }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <h1>Creating <span>Sticky</span> Navigation</h1> <nav class="demo-nav"> <a href="index.html" class="active">Using jQuery</a> <a href="index2.html" >Using CSS</a> </nav> </header> <nav class="main-nav"> <div class="container"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Profile</a> <a href="#">Contact</a> </div> </nav> <div class="content"> <h2>Main Content Here!</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 向導航欄添加徽標 縮小粘性導航欄 粘性導航欄 -React 粘性導航欄功能失調 粘性導航欄-不起作用 粘性導航欄 粘性導航欄功能 粘性/移動導航欄 粘性導航欄<a>標簽</a> 導航欄中徽標圖像的問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM