Липкая панель навигации

Прежде всего, извините за много кода и перепробовал вопрос, не знал, какую часть кода мне следует включить, и я не мог решить это на основе предыдущих сообщений :( Эй , Я пытаюсь сделать изображение на веб-сайте медленно исчезающим, и панель навигации остается наверху, когда вы прокручиваете вниз, какие-либо идеи? Пытался посмотреть на другие сообщения в 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

Пожалуйста, пост [mcve] и обрабатывать ваши предыдущие вопрос – mplungjan

вы можете сделать это, просто добавив скрипт, который на scroll 100px добавит класс .navbar-fixed-top 'в .menu', а когда scrollTop будет меньше 100px, он просто удалит класс из меню ... :) – Navnit

быстрый совет: удалите bootstrap.css и bootstrap-theme.css, так как вы уже включили мини-версии этих версий, вам не нужны улучшенные версии тех, которые больше по размеру, и будут перезаписаны миниатюрами в любом случае, двойные данные, лет – Grey

я получил ли это он работал для меня, если это то, что вы ищете: 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

Липкая панель навигации

ответ

Смежные вопросы