在不使用外部库的徽标下创建粘滞导航栏

时间：2017-01-17 03:36:02

标签： 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 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

无需在其他地方进行链接。

＆＃13;
＆＃13; 
$(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 290) {
            $('nav.main-nav').addClass('stickytop');
        }
        else {
            $('nav.main-nav').removeClass('stickytop');
        }
    });
});
＆＃13; 
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
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题