создание одной навигационной панели Sticky, когда пользователь прокручивает

Question

У меня есть два навигатора. Скажем, пользовательская навигационная панель сверху и первичная навигационная панель под пользовательской навигационной панелью.

Я хочу иметь липкий первичный навигатор, когда пользователь прокручивает.

Что именно им пытаются сделать, что делает NavBars похож на мой любимчик игровой сайт заголовок, здесь https://playoverwatch.com/en-us/ Посмотрите, как первый Navbar красиво исчезает при прокрутке, а второй один торчит на вершине? Я действительно хочу иметь что-то подобное или, может быть, именно так.

#ipsLayout_header header { 
 
    margin-bottom: 15px; 
 
    background-color: rgba(2,25,72,.3); 
 
} 
 
.ipsLayout_container { 
 
    max-width: 1340px; 
 
    padding: 0 15px; 
 
} 
 
.ipsNavBar_primary { 
 
    background: #304d66; 
 
}

<div id="ipsLayout_header"> 
 
    <header> 
 
     <div class="ipsLayout_container"><!-- my first navbar --> 
 
      <ul id="elUserNav"> 
 
       <li id="cCreate"> 
 
\t \t \t \t links 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </header> \t 
 
    <nav class="ipsLayout_container"><!-- my second navbar --> 
 
     <div class="ipsNavBar_primary"> 
 
      <ul class="ipsResponsive_block"> 
 
       <li id="elNavSecondary_34"> 
 
       links 
 
       </li> \t 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</div>

Answer 1

Вот код. Создайте заголовок div, прикрепленный к вершине, и в строке прокрутки укажите верхнюю минус как высоту верхнего меню.

CSS -

#ipsLayout_header{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
    z-index: 10; 
    background: #fff; 
    -webkit-transition: .3s all 0s ease; 
    -moz-transition: .3s all 0s ease; 
    transition: .3s all 0s ease; 
} 

js-

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    var headerHeight = $('header').outerHeight(); 
    if (scroll >= 100) { 
    $("#ipsLayout_header").css('top', -headerHeight); 
    } 
    else { 
    $("#ipsLayout_header").css('top', '0'); 
    } 
}); 

JSFiddle - https://jsfiddle.net/dhananjaymane11/wvykLqxb/1/

Answer 2

Попробуйте это ...

$(document).ready(function(){ 
 
\t $(window).scroll(function(){ 
 
    \t if ($(document).scrollTop()>$('nav').offset().top) 
 
    \t $('nav').addClass('onTop'); 
 
    else 
 
    \t $('nav').removeClass('onTop'); 
 
    }) 
 
})

#ipsLayout_header{ 
 
    width:100%; 
 
    height:800px; 
 
    background:#feacbe; 
 
    padding:0px; 
 
    margin:0px; 
 
    } 
 
    #ipsLayout_header header { 
 
     margin-bottom: 15px; 
 
     height: 44px; 
 
     background-color: rgba(2,25,72,.3); 
 
    } 
 
    .ipsLayout_container { 
 
     max-width: 1340px; 
 
     padding: 0 15px; 
 
    } 
 
    .ipsNavBar_primary { 
 
     width:100%; 
 
     height:40px; 
 
     background: #304d66; 
 
    } 
 
    .onTop{ 
 
     position:fixed; 
 
     z-index:9999; 
 
     width:92%; 
 
     top:0; 
 
    } 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="ipsLayout_header"> 
 

 
\t <header> 
 
\t \t <div class="ipsLayout_container"><!-- my first navbar --> 
 
\t   <ul id="elUserNav"> 
 
\t \t \t  <li id="cCreate"> 
 
\t \t \t \t links 
 
\t \t \t  </li> 
 
\t   </ul> 
 
\t  </div> 
 
\t </header> 
 
\t 
 
\t <nav class="ipsLayout_container"><!-- my second navbar --> 
 
\t \t <div class="ipsNavBar_primary"> 
 
\t \t \t <ul class="ipsResponsive_block"> 
 
\t \t   <li id="elNavSecondary_34"> 
 
\t \t \t \t links 
 
\t \t   </li> \t 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </nav> 
 

 
</div>

$ (документ) .scrollTop() это функция, которая используется для получения текущей прокрутки положение окна, на основе которого вы можете изменить классы CSS.

Answer 3

<h2>First header</h2> 
<header><h1>Sticky Header</h1></header> 
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(window).scroll(function() { 
if ($(this).scrollTop() > 1){ 
    $('header').addClass("sticky"); 
    } 
    else{ 
    $('header').removeClass("sticky"); 
    } 
}); 
</script> 
<style type="text/css"> 

    header{ 
    width: 100%; 
    text-align: center; 
    font-size: 72px; 
    line-height: 108px; 
    height: 108px; 
    background: #335C7D; 
    color: #fff; 
    font-family: 'PT Sans', sans-serif; 
} 

.sticky { 
    position: fixed; 
    top: 0; 
} 
</style> 

https://jsfiddle.net/mv0h6r1t/

Answer 4

$(function() { 
 
    var win = $(window); 
 
    var header = $('#ipsLayout_header'); 
 
    var height = $('header').outerHeight(true); 
 
    
 
    win.on('load scroll', function() { 
 
    if(win.scrollTop() > height) { 
 
     header.addClass('sticky'); 
 
     header.css({ 
 
     marginTop: -height 
 
     }); 
 
    } else { 
 
     header.removeClass('sticky'); 
 
     header.css({ 
 
     marginTop: 0 
 
     }); 
 
    } 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
#ipsLayout_header { 
 
    transition: margin 0.25s ease; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    z-index: 100; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#ipsLayout_header header { 
 
    background-color: rgba(2,25,72,.3); 
 
    transform: translateY(0); 
 
    margin-bottom: 15px; 
 
} 
 
.ipsLayout_container { 
 
    position: relative; 
 
    max-width: 1340px; 
 
    padding: 0 15px; 
 
} 
 
.ipsNavBar_primary { 
 
    background: #304d66; 
 
} 
 
.page-content { 
 
    height: 1000px; 
 
} 
 
.ipsResponsive_block, 
 
#elUserNav {margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="ipsLayout_header"> 
 

 
    <header> 
 
    <div class="ipsLayout_container"><!-- my first navbar --> 
 
     <ul id="elUserNav"> 
 
     <li id="cCreate"> 
 
      links 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 

 
    <nav class="ipsLayout_container"><!-- my second navbar --> 
 
    <div class="ipsNavBar_primary"> 
 
     <ul class="ipsResponsive_block"> 
 
     <li id="elNavSecondary_34"> 
 
      links 
 
     </li> \t 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
</div> 
 
<div class="page-content"> 
 
    
 
</div>