Привязка блока к верхней границе браузера.

как вариант очень красиво использовать такой эффект Для просмотра ссылки Войди или Зарегистрируйся с использоанием JQuery скриптов

вот исходники:
index.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="navi">
    <div id="menu" class="default">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Freebies</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Resources</a></li>           
            <li><a href="#">Tutorials</a></li>           
            <li><a href="#">WordPress</a></li>           
        </ul>
    </div><!-- close menu -->
</div><!-- close navi -->

<div id="content">
 <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div><!-- content -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
</body>
</html>

Сам скрипт:
Код: 
$(function(){
   
    var menu = $('#menu'),
        pos = menu.offset();
       
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});

и стили :
Код: 
body {
    background: #efefef;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    font: normal 13px Verdana, sans-serif;
    color: #222;
}

#navi {
    height: 50px;
    margin-top: 50px;
}

#menu {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
    background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
   
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
   
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

#content {
    width: 750px;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 30px 0;
    text-align: left;
}

ul {
    padding: 0;
}

ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}

ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
   
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
   
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

ul li a:hover {
    background: #01458e;
    color: #ff0;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

.default {
    width: 850px;
    height: 50px;
   
    box-shadow: 0 5px 20px #888;
    -webkit-box-shadow: 0 5px 20px #888;
    -moz-box-shadow: 0 5px 20px #888;
}

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
   
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}
 
vitalyx написал(а):
как вариант очень красиво использовать такой эффект Для просмотра ссылки Войди или Зарегистрируйся с использоанием JQuery скриптов
Нажмите для раскрытия...

Вот то что нужно))) Я сделал просто, кратко, и наверное криво))) Но все есть. Хотелось бы совсем для чайников. Файликами... Если можно
 
в css добавляем position:fixed и top:0 и она там висит даже при скролле
 
C.B.D написал(а):
Я немного не правильно описал. я взял за основу горизонтальное меню идущее в стоке. Прилепил его наверх. впихнул туда же корзину и поиск все поставил fixed. Но при учете того что бэкграунд стоит на 100% все растягивается в зависимости от разрешения. Если ставить wihgt например 900пкс то при скроллинге он занимает не полную ширину монитора. В общем сижу ковыряю чтобы все это дело было "резиновым". Для просмотра ссылки Войди или Зарегистрируйся

Еще вопрос чтобы воткнуть вверх картинку отдельно от фона нужно отдельным блоком прописывать только в global или нужно в тпл тоже?
Нажмите для раскрытия...
Извини, можно дать пару советов? При разрешении 1024х768 у Вас плывет верхнее поле. при чем плывет достаточно хаотично: поиск становится выше чем корзина. Я бы на Вашем месте исправил z-index, т.к. они у Вас одинаковы для этих позиций, и попробовал поиграться с параметром float:, чтобы не было такого категоричного беспредела на более низких разрешениях....
 
rrex написал(а):
Извини, можно дать пару советов? При разрешении 1024х768 у Вас плывет верхнее поле. при чем плывет достаточно хаотично: поиск становится выше чем корзина. Я бы на Вашем месте исправил z-index, т.к. они у Вас одинаковы для этих позиций, и попробовал поиграться с параметром float:, чтобы не было такого категоричного беспредела на более низких разрешениях....
Нажмите для раскрытия...
Не проверял на таких значениях.... действительно надо поиграть... Изначально думал что на таких параметрах мониторов у людей просто напросто не осталось))))))))
 
Вообще в идеале сделать отдельными файлами граммотно и т.д. но я даже не понимаю как их связывать и куда закидывать..
 
C.B.D написал(а):
Не проверял на таких значениях.... действительно надо поиграть... Изначально думал что на таких параметрах мониторов у людей просто напросто не осталось))))))))
Нажмите для раскрытия...
я сам думал что не осталось, когда верстать начинал, но оказалось - их даже очень и очень много. на организациях и т.д.... та же ситуация была и с мыслями о том, что I.E. не пользуется никто и один раз попал даже на монитор 15 дюймов у пользователя I.E. :) нужно быть готовым ко всему. лично у меня два запасных монитора рядом стоят и я на них тестирую:)

еще, не понятно почему, изменяется позиция поиска при таком разрешении, и пропадают ссылки, которые слева находятся (я имею в виду меню) возможно это все лучше объединить в один div и задать ему параметры min-width, чтоб он не сжимался меньше чем определенная ширина.
 
Так вот как его написать не знаю.... Тут были примеры. Но я не знаю что куда пихать. Ребятам спасибо но я.....зеелный
 
Все! Посмотрел на 1024. Шаблон у меня bootstrap под каждое разрешение global пишется
 
надо короче везде прописать и потом смотреть
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху