結合粘性導航和轉換

我有一個使用Bootstrap導航的Wordpress網站。我有我的標誌/品牌下方的導航。當用戶滾動到屏幕上方時，我想要將導航「粘」到屏幕的頂部。一旦導航「卡」到頂端，我希望它的高度更大一些。結合粘性導航和轉換

我已分別，但不知道如何將它們結合起來，以達到我想要的工作代碼兩者。

HTML - 規模導航

<script> 
$(function(){ 
var shrinkHeader = 25; 
$(window).scroll(function() { 
var scroll = getCurrentScroll(); 
    if (scroll >= shrinkHeader) { 
     $('header').addClass('shrink'); 
    } 
    else { 
     $('header').removeClass('shrink'); 
    } 
}); 

    function getCurrentScroll() { 
    return window.pageYOffset || document.documentElement.scrollTop; 
    } 
    }); 
</script>

HTML - 粘腳本

<script> 
$(document).ready(function() { 
var s = $("#divname"); 
var pos = s.position();      
$(window).scroll(function() { 
    var windowpos = $(window).scrollTop(); 
    if (windowpos >= pos.top) { 
     s.addClass("stick"); 
    } else { 
     s.removeClass("stick"); 
    } 
}); 
}); 
</script>

HTML - 的header.php

<a class="brand" href="<?php echo home_url(); ?>/"></a> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

    </div> 

    <div class="navbar-collapse collapse"> 

...

CSS

header { 
position: fixed; 
overflow: hidden; 
z-index: 100; 
width: 100%; 
top: 0; left: 0; 
padding: 0 25px; 
text-align: center; 
background-color: rgba(250,250,250,1); 
-webkit-transition: height 0.35s ease, padding 0.35s ease; 
-moz-transition: height 0.35s ease, padding 0.35s ease; 
-ms-transition: height 0.35s ease, padding 0.35s ease; 
-o-transition: height 0.35s ease, padding 0.35s ease; 
transition: height 0.35s ease, padding 0.35s ease; 
}

來源

2015-09-01 user3550879

你可以爲它創建 – vishwa

不幸的是，涉及我不能變量量小提琴。我想知道是否有人做了類似的事情，並且建議 – user3550879

嘗試調用$（'header'）。addClass（'shrink'）;添加類s.addClass（「stick」）後;反之亦然，如果我得到你的權利 – vishwa

要完成此結果非常簡單，您需要查看.navbar-fixed-top。 Bootstrap使這個類的導航欄變得粘稠。下面一個例子：

JS：

$(document).ready(function() { 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     var navbar = $('#navbar'); 

     // if win >= navbar and not already a sticky 
     if (windowpos >= navbar.position().top && !navbar.hasClass("navbar-fixed-top")) { 
      navbar.addClass("navbar-fixed-top"); 

     // if win <= navbar and is a sticky 
     } else if(windowpos <= navbar.position().top && navbar.hasClass("navbar-fixed-top") ) { 
      navbar.removeClass("navbar-fixed-top"); 
     } 
    }); 
});

CSS：

#navbar { 
    background-color:orange; 
    padding:5px; 
    transition: all 0.35s ease; 
} 

#navbar.navbar-fixed-top { 
    position: fixed; 
    top:0; 
    left:0; 
    right:0; 
    padding: 20px; 
    transition: all 0.35s ease; 
}

這增加了填充，但transition: all設置任何CSS變量會做得很好。這是沒有引導的示例jsfiddle！

來源

2015-09-01 13:54:58 Kivylius

真棒謝謝你 – user3550879

結合粘性導航和轉換

回答

相關問題