1. 首页
  2. 问答
  3. 粘滞导航栏

粘滞导航栏

2016-11-17 124 views
0

首先，抱歉代码很多，并重新发布的问题，不知道我应该包括哪些代码的部分，我不能解决这个基于以前的帖子:( 嘿嘿，我试图让网站上的图像慢慢消失，当你向下滚动任何想法时导航栏保持顶部？试图看看stackoverflow上的其他帖子，但根本无法使其工作：/ 我的网站：https://developerbay.000webhostapp.com/粘滞导航栏

HTML：

<!DOCTYPE HTML> 

<head> 
    <title>Fancuwebside</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"></link> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"></link> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></link> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"></link> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></link> 

    <div><a>Hello</a></div> 
    <nav class="navbar navbar-inverse menu"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">WebSiteName</a> 
      </div> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Page 1</a></li> 
       <li><a href="#">Page 2</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> 
     </div> 
    </nav> 
</head> 
<body> 
    <div class="progress" style="width: 700px; margin: auto;"> 
     <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%"> 
      30% complete 
     </div> 
     <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
      70% remaining 
     </div> 
    </div> 
<div class="content"> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> 
    <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p> 
    <p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p> 
    <p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short 

    <script type="text/javascript" src="js/script.js"></script> 
</body>

CSS：

个 
body { 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background-image: url(http://www.lovethisgif.com/uploaded_images/121722-File-color-Square-Cm.gif-Wikimedia-Commons.gif); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
} 
.sticky { 
    position:fixed; 
    top:0; 
} 
.content { 
    margin-top:10px; 
} 
.content p { 
    margin-bottom:20px; 
} 
.menu { 
}

JS：

$(document).ready(function() { 

    var menu = $('.menu'); 
    var origOffsetY = menu.offset().top; 

    function scroll() { 
     if ($(window).scrollTop() >= origOffsetY) { 
      $('.menu').addClass('sticky'); 
      $('.content').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('sticky'); 
      $('.content').removeClass('menu-padding'); 
     } 


    } 

    document.onscroll = scroll; 

});

来源

2016-11-17 Omnitored

+1

请发表[MCVE]和处理以前的问题 – mplungjan

+0

你可以简单地通过添加一个滚动100px的脚本来做到这一点，将'.navbar-fixed-top'类添加到'.menu'，当scrollTop小于100px时，它将简单地从菜单中删除类... :) – Navnit

+0

快速提示：删除bootstrap.css和bootstrap-theme.css，因为你已经包含了这些缩小版本，你不需要这些版本的美化版本，因为它们很大，并且会被缩小版本覆盖，双数据，哟 – Grey

回答

0

我这一个它的工作对我来说，如果这是你在找什么： CSS

position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
z-index: 150; 
margin-bottom: 300px; 
margin-left: 40px;

来源

2016-11-17 11:00:48 Pixelconcept

相关问题

 相关问题