Question

我正在尝试创建一个导航栏，它在加载时位于浏览器窗口的底部，但是当你向下滚动到浏览器的顶部时。

这种网站http://thomas-rogers.co.uk/BleepBleeps2/index.html正在工作，但我无法将导航栏定位在浏览器窗口的底部，即根据屏幕大小等有时不可见。

非常感谢任何帮助。我无法理解这一点。

目前我正在使用此代码

            <header>
<div class="container">
    <div class="eight columns offset-by-eight" id="logo-box">
        <h1 class="logo">BleepBleeps</h1>
        <h2 class="subheader">A family of little friends<br>that make parenting easier</h2>
    <!-- MAILCHIMP SIGNUP -->
        <form action="http://bleepbleeps.us6.list-manage1.com/subscribe/post?u=e6067eec57&amp;id=7e02f5f7e4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <input type="email" name="EMAIL" placeholder="Your email" class="required email mc-field-group" id="mce-EMAIL">
            <input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="tooltip my-custom-theme" title="Sign up to receive amazing Bleep Bleeps content!">

            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
        </form><!-- end MAILCHIMP SIGNUP -->
    </div><!-- end logo-box -->
</div><!-- end container -->

<div class="hero">
    <img class="hero-image" src="images/bb-background2.png" alt="#">
</div>

<nav class="navigation">
    <div class="container">
        <img src="images/bb_note.gif" alt="bleepbleeps icon" class="notes">
            <ul class="socialnav">
                <li class="circle-social tw"><a href="http://twitter.com/BleepBleeps"></a></li>
                <li class="circle-social fb"><a href="http://www.facebook.com/BleepBleeps"></a></li>
                <li class="circle-social tu"><a href="http://bleepbleeps.tumblr.com"></a></li>
                <li class="circle-social in"><a href="http://instagram.com/bleepbleeps"></a></li>
            </ul>
    </div>
</nav>

             nav {
width: 100%;
background: #fff;
height: 3em;
     }

    nav.navigation {
position: absolute;
padding-top: 1em;
width: 100%;
background: #fff;
opacity: 0.8;
bottom: 0;
z-index: 99;
     }

    @media only screen and (max-width: 479px) {
nav.navigation {
    position: relative !important;
}
     }

    .sticky {
position: fixed !important;
top: 0;
     }

    .sticky2 {
position: fixed !important;
left: 50%;
margin-left: 10px;
top: 11px;
     }

    @media only screen and (max-width: 767px) {
.sticky {
position: relative; !important;
     }

.sticky2 {
    display: none !important;
}
     }

    .notes {
float:left;
margin-left: 10px;
     }

     var delay = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
         };
     })();

     $(function() {

         var pause = 100; // will only process code within delay(function() { ... }) every 100ms.

$(window).resize(function() {

    delay(function() {

        var width = $(window).width();

        $(document).ready(function() {  
            var stickyNavTop = $('.navigation').offset().top;  

            var stickyNav = function(){  
            var scrollTop = $(window).scrollTop();  

            if  (scrollTop > stickyNavTop + 5) {   
                $('.navigation').addClass('sticky');  
            } else {  
                $('.navigation').removeClass('sticky');   
            }  
            };


            stickyNav();  

            $(window).scroll(function() {  
                stickyNav();  
            });  
            }); 

             }, pause );

         });

         $(window).resize();

     });


     $(document).ready(function() {  
     var stickyNavTop2 = $('#mc-embedded-subscribe-form').offset().top;  

     var stickyNav2 = function(){  
     var scrollTop2 = $(window).scrollTop();  

     if (scrollTop2 > stickyNavTop2) {   
         $('#mc-embedded-subscribe-form').addClass('sticky2');  
     } else {  
         $('#mc-embedded-subscribe-form').removeClass('sticky2');   
     }  
     };  

     stickyNav2();  

     $(window).scroll(function() {  
         stickyNav2();  
     });  
     });

Answer 1

您可以使用jQuery来完成它。

像...一样的东西。

$('.navigation').css('top',$(window).height()-50);

您可能希望减去像50这样的像素，以便将其移动到用户的视图中。

粘性导航栏到浏览器窗口的底部

1 个答案: