удерживать меню веб-сайта на экране при прокрутке

0

Я пытаюсь сделать так, чтобы мое раскрывающееся меню оставалось в верхней части экрана (так что независимо от того, насколько далеко вы прокручиваете меню сайта всегда наверху) при прокрутке вниз на моем веб-сайте. Это 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>
Теги:
static

4 ответа

0
Лучший ответ

Вот рабочий пример (нужно было добавить несколько строк js): http://jsfiddle.net/wHF97/

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

Он использует плагин jQuery под названием stickUp. На их главной странице также есть рабочий пример: http://lirancohen.github.io/stickUp/#

Примечание. Я включил плагин stickUp, используя "Внешние ресурсы" в левой панели jsfiddle.

Поделиться
  • 0
    Это именно то, что я искал. Еще одна проблема, я не знаю, как включить java-скрипт, где бы он был?
  • 0
    Перейдите на страницу GitHub: github.com/LiranCohen/stickUp. Щелкните «Загрузить Zip» в правой части страницы. Там вы найдете файл README, лицензию и полный рабочий пример. Но вкратце вы бы включили js-файл, как и любой другой, в свой тег HEAD: <script src = "js / stickUp.min.js"> </ script>. Надеюсь, это поможет.
Показать ещё 5 комментариев
3

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

Поделиться
  • 0
    Это работает, если держать его в верхней части экрана, но показывает только почтовый раздел моего меню, и даже почтовый раздел не имеет всех подкатегорий.
  • 0
    Вы не включили в свой вопрос никакой другой контент-разметку, поэтому я пошел с тем, что имел. Не стесняйтесь использовать этот jsFiddle, чтобы показать мне, какие у вас проблемы.
0

Используется позиция css: фиксированный атрибут:

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

Поделиться
0

Событие jQuery scroll() и $ (window).scrollTop() возвращает текущую позицию прокрутки окна. Если это значение превышает позицию элемента, который вы хотите "следить" за прокруткой, используйте addClass, чтобы указать этот элемент: position: fixed; верх: 0; Таким образом, когда пользователь прокручивается вниз по позиции позиции, он внезапно (и красиво) перемещается с прокруткой окна. Возможно, вам придется пересчитать левый элемент. Если положение окна выше, removeClass фиксированное положение.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню