滚动时将网站菜单保持在屏幕上

Question

我正在努力做到这一点，以便在我的网站上向下滚动时，我的下拉菜单将保持在屏幕顶部（因此无论您向下滚动多远，站点菜单始终位于顶部）。这是我用于我的网站的 CSS 和菜单。有人可以帮助我吗？我已经尝试了好几天没有成功。

<style>
    #cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
        margin: 0;
        padding: 0;
        position: relative;
    }
    #cssmenu: after, #cssmenu ul: after {
        content: '';
        display: block;
        clear: both;
    }
    #cssmenu a {
        color: #FF0000;
        display: inline-block;
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
        font-size: 12px;
        min-width: 35px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 -1px 0 #000;
    }
    #cssmenu ul {
        list-style: none;
    }
    #cssmenu > ul > li {
        float: left;
    }
    #cssmenu > ul > li.active a {
        background: #000 url(grad_dark.png) repeat-x left bottom;
        background: -moz-linear-gradient(top, #000 0%, #000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
        background: -webkit-linear-gradient(top, #000 0%, #000 100%);
        background: -o-linear-gradient(top, #000 0%, #000 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 100%);
        background: linear-gradient(to bottom, #000 0%, #000 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
        -moz-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
        -webkit-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
        filter: none;
    }
    #cssmenu > ul > li.active a: hover {
        background: -moz-linear-gradient(top, #000 0%, #000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
        background: -webkit-linear-gradient(top, #000 0%, #000 100%);
        background: -o-linear-gradient(top, #000 0%, #000 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 100%);
        background: linear-gradient(to bottom, #000 0%, #000 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        filter: none;
    }
    #cssmenu > ul > li a {
        box-shadow: inset 0 0 0 1px #000;
        -moz-box-shadow: inset 0 0 0 1px #000;
        -webkit-box-shadow: inset 0 0 0 1px #000;
        background: #000 url(grad_dark.png) repeat-x left top;
        background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #000));
        background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #000 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        line-height: 34px;
        padding: 0 35px;
        filter: none;
    }
    #cssmenu > ul > li a: hover {
        background: #000 url(grad_dark.png) repeat-x left bottom;
        background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #525252));
        background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #c 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        filter: none;
    }
    #cssmenu > ul > li: first-child a {
        border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -webkit-border-radius: 5px 0 0 5px;
        border-left: 1px solid #000;
    }
    #cssmenu > ul > li: last-child a {
        border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -webkit-border-radius: 0 5px 5px 0;
    }
    #cssmenu .has-sub: hover ul {
        display: block;
    }
    #cssmenu .has-sub ul {
        display: none;
        position: absolute;
        top: 36px;
        left: -1px;
        min-width: 100%;
        text-align: center;
        /* IE7 */
        *width: 100%;
    }
    #cssmenu .has-sub ul li {
        text-align: center;
    }
    #cssmenu .has-sub ul li a {
        border-top: 0 none;
        border-left: 1px solid #000;
        display: block;
        line-height: 120%;
        padding: 9px 5px;
        text-align: center;
    }
</style>

<div id='cssmenu'>
    <ul>
        <li class='Stream Portal'><a href="./home.html" >Home</a>
        </li>
        <li class='has-sub'><a href="./home.html" >TV</a>
            <ul>
                <li><a href="./justintv.html" >Justin</a></li>
                <li><a href="http://lmtv.us/#" >LM</a></li>
                <li><a href="http://www.mtv.com/ontv/" >MTV</a></li>
                <li><a href="http://www.spike.com/episodes" >Spike</a></li>
                <li><a href="http://www.cartoon-world.tv/cartoon-list/" >Toon</a></li>
                <li><a href="./tubtub.html" >TubTub</a></li>
                <li class='last'><a href="shows" >Veetle</a></li>
            </ul>
        </li>
        <li class='has-sub'><a href="./home.html" >Movies</a>
            <ul>
                <li><a href="./moviesearchframe.html" >Movie Search</a></li>
                <li><a href="http://topdocumentaryfilms.com/" >Documentaries</a></li>
                <li><a href="http://freeonlinemoviestream.co/" >Movie Stream</a></li>
                <li><a href="./megashare.html" >MegaShare</a></li>
                <li><a href="http://www.cartoon-world.tv/movie-list/" >Toon</a></li>
                <li class='last'><a href="http://watch32.com/new-movies.html" >Watch32</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

#cssmenu {position:fixed;top:0px}

Answer 2

这是一个工作示例（只需添加几行 js）：http://jsfiddle.net/wHF97/

jQuery(function($) {
    $(document).ready( function() {
        $('#cssmenu').stickUp();
    });
});

它使用一个名为stickUp 的jQuery 插件。他们的主页也有一个工作示例：http://lirancohen.github.io/stickUp/#

注意：我在 jsfiddle 的左侧窗格中使用“外部资源”包含了 stickUp 插件。

Answer 3

使用了css位置：固定属性：

http://www.w3.org/Style/Examples/007/menus.en.html

Answer 4

jQuery scroll() 事件和 $(window).scrollTop() 返回滚动窗口的当前位置。如果该值高于您要“跟随”滚动的项目的位置，请使用 addClass 给该项目： position:fixed;顶部：0；这样，当用户向下滚动到项目的位置时，它会突然（并且很好地）随着窗口滚动而移动。您可能需要重新计算项目的左侧。如果窗口的位置在上面，removeClass 固定位置。