Question

Reference blog here
我想设置两个固定的导航栏。但是，当第一个导航栏遇到第二个导航栏时，它会被覆盖，而不是较低的“粘贴”到上部导航栏。如何将它放到底部附在顶部的位置？

对不起，我的参考博客必须这样做。

此外，徽标是否可以保持固定并使身体继续滚动？提前致谢！

这是黑色导航栏的来源（stickhead告诉该部分是粘性的）：

<!-- Top Nav Started -->
    <stickhead> 
        <div id='topnav'>
        <div class='wrapnya'>

<!-- Top Nav Clock -->
            <span class='tgltop'>
                    <i class='fa fa-clock-o'/> <span id='tglxnya'/>
                        <span id='clockx'/>
                            <script class='jshilang' type='text/javascript'>datetime();</script>    
            </span>
<!-- /Top Nav Clock -->

<!-- Top Nav Menu -->
            <a href='#' id='topmobilenav'>Menu</a>

            <ul class='sf-menu' id='topmenunav'>
              <li><a href='/p/about.html'>About</a></li>
                <li><a href='/p/contact.html'>Contact</a></li>
                <li><a href='/p/submit.html'>Submit</a></li>
            </ul>
<!-- /Top Nav Menu -->

<!-- Top Nav Socials -->
            <ul class='sociico socialmedia' id='icon-socialmn'>
              <li><a href='https://facebook.com/thefinestnews' target='_blank'>Facebook</a></li>
                <li><a href='https://twitter.com/TheFinestNews' target='_blank'>Twitter</a></li>
                <li><a href='https://plus.google.com/+FinestnewsBlogspotOfficial/' target='_blank'>Google+</a></li>
                <li><a href='/feeds/posts/default' target='_blank'>RSS</a></li>
            </ul>
<!-- /Top Nav Social -->
      </div>
    </div>
    </stickhead>

这是红色导航栏的来源（sticknav告诉该部分是粘性的）：

<!-- Main Nav Started -->
   <nav class='navix' id='nav'>
   <sticknav>   
        <div class='wrap'>      

<!-- Main Nav Menu -->
        <a href='#' id='mobilenav'>Menu</a>
        <ul class='sf-menu' id='menunav'>
            <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
            <li><a href='#'><b>FN</b></a>
                <ul>
                    <li><a href='/p/about.html'>About</a></li>
                    <li><a href='/p/contact.html'>Contact</a></li>
                    <li><a href='/p/submit.html'>Submit</a></li>
                    <li><a href='/p/dev.html'>Development</a></li>
                </ul>
            </li>
            <li><a href='/search/label/Science'>Science</a></li>
            <li><a href='/search/label/Technology'>Technology</a></li>
            <li><a href='/search/label/Entertainment'>Entertainment</a></li>
            <li><a href='/search/label/Business'>Business</a></li>
            <li><a href='/search/label/Politics'>Politics</a></li>
            <li><a href='/search/label/Local'>Local</a></li>
            <li><a href='/search/label/Sports'>Sports</a></li>
            <li><a href='/search/label/Life'>Life</a></li>
        </ul>
<!-- /Main Nav Menu -->

<!-- Main Nav Search -->
        <div id='searchnya'>
            <form action='/search' id='ajax-search-form'>
                <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search articles...&quot;;}' onfocus='if (this.value == &quot;Search articles...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search articles...'/>
                <button title='Search' type='submit'>Search</button>
            </form>
        </div>
<!-- /Main Nav Search -->

</div>
</sticknav>  

sticknav {
background: #b50000;
height: 46px;
width: 1080px;
margin: auto;
left: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-top: 4px solid #e50000;
webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
box-shadow: 0 2px 6px rgba(0,0,0,0.49);
}
.fixed {
    position:fixed;
}

以下是两者的JS（红色导航栏的JS位于顶部，可能有一种方法可以将这两个包含在一个JS代码中，但我很懒惰）：

$(document).ready(function() {

var aboveHeight = 200;

$(window).scroll(function(){
if ($(window).scrollTop() >= aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','50px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
$(document).ready(function() {

var aboveHeight = 25;

$(window).scroll(function(){
        if ($(window).scrollTop() >= aboveHeight){
        $('stickhead').addClass('head').css('top','0').next().css('padding-top','29px');
        } else {
       $('stickhead').removeClass('head').next().css('padding-top','0');
        }
    });
});

如何堆叠固定导航栏？

0 个答案: