Как создать Fading В Navbar после прокрутки?

У меня есть обложка, которая, используя jscript, растягивает все окно на любое разрешение. Когда вы прокрутите страницу вниз, заголовок страницы вверх и появится содержимое. Я пытаюсь, чтобы navbar исчезал, как только обложка полностью прокручивается, а затем сохраняет навигационную статическую оставшуюся часть страницы, если вы не прокрутите назад до обложки, которая будет отключена на навигационной панели. К сожалению, если я зафиксирую позицию навигационной панели, она вообще не покажется. Пожалуйста помоги.Как создать Fading В Navbar после прокрутки?

HTML

<body> 

<div id="container"> 

    <div id="header"> 
    </div> 

    <div id="navbar"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">About</a></li> 
     </ul> 
    </div> 

</div> 
</body>

CSS

html, body{ 
    height:100%; 
    margin:0; 
    background:#F9F9F9; 
    /*This is to cut off the white border around the webpage*/ 
} 

#container { 
    position: relative; 

    max-width: 2048px; 
    margin: 0px auto; 
    width: 100%; 
    height:100%; 
} 

#header { 
    background: url('../images/cover6.jpg') no-repeat; 
    background-size:cover; 
    height: 100%; 
    margin:0px auto; 
    width:100%; 
} 

#navbar ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

JSS

<script> 
    $(window).resize(function() { 
    $("#container").height($(window).height()); 
    }); 
</script> 


<script> 
    (function ($) { 
    $(document).ready(function(){ 

     // hide .navbar first 
     $("#navbar").hide(); 

     // fade in .navbar 
     $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before we fadeIn navbar 
      if ($(this).scrollTop() > 1000) { 
       $('#navbar').fadeIn(); 
      } else { 
       $('#navbar').fadeOut(); 
      } 
     }); 


    }); 

    }); 
    }(jQuery)); 
</script>

источник

2015-02-27 user3003228

сделать Navbar внутри DIV заголовка и изменить верхнюю и левую свойства до 0:

#navbar { 
position:static; 
margin: 0; 
padding: 0; 
left:0; 
top:0;

}

источник

2015-02-27 17:37:11

здесь точно такой же эффект ваш ищете:

Live Demo

Я использовал Jquery и waypoints.js сделать так легко:

$(function() { 
      $("#demo-heading").waypoint(function() { 
       $("#demo").fadeIn(); 
      }, 
      { 
       offset: 400 
      }); 

      $(".site-header").waypoint('sticky'); 
     });

не забудьте добавить эти два li bs после JQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/shortcuts/sticky-elements/waypoints-sticky.js"></script>

источник

2015-02-27 17:38:31

Как создать Fading В Navbar после прокрутки?

ответ

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