Строка меню, которая находится не сверху, но как только вы скользите вниз, строка меню прилипает к вершине

Question

Строка меню, которая находится не сверху, но как только вы скользите вниз, строка меню прилипает к вершине

0

Мне нужно сделать панель меню, как в http://showbic.com/sports/adam-milne-vs-west-indies/

На этом веб-сайте menu_bar находится не сверху, но при прокрутке вниз строка меню не доходит до остальной части контента, но после касания верхней части она остается наверху.

Я знаю, что какой-то JavaScript используется в сочетании с CSS, но как я не знаю, пожалуйста, кто-нибудь мне поможет.

Заранее спасибо.

Bangash 20 янв. 2014, в 14:22

Источник

0

Можете ли вы опубликовать код, пожалуйста, плюс скрипка.
SaturnsEye 20 янв. 2014, в 12:45
0

Ссылка мертва ...
laaposto 20 янв. 2014, в 12:47
0

@Adsy Адси У него нет ... лол
Anup 20 янв. 2014, в 12:47
0

@laaposto Ссылка живет на моем конце
Anup 20 янв. 2014, в 12:47
0

outyear.co.uk/smint Кстати: google.com/…
gearsdigital 20 янв. 2014, в 12:47
0

И если вы используете SMINT, не стесняйтесь отправлять сообщения в твиттер @rabmyself!
Anup 20 янв. 2014, в 12:49
0

stackoverflow.com/questions/14667829/...
Progrower 20 янв. 2014, в 12:49
1

Вы уже нашли пример, почему бы вам просто не скопировать это и не изменить?
Kuzgun 20 янв. 2014, в 12:50

Показать ещё 6 комментариев

Теги:

javascript

html

css

3 ответа

Ещё вопросы

Можете ли вы опубликовать код, пожалуйста, плюс скрипка.
И если вы используете SMINT, не стесняйтесь отправлять сообщения в твиттер @rabmyself!
Вы уже нашли пример, почему бы вам просто не скопировать это и не изменить?

Lukas · Answer 1 · 2014-01-20T11-05-00.000Z

Я бы посоветовал попробовать что-то с onscroll в Javascript, а затем сохранить заголовок вверху, вы можете использовать position:fixed; в контейнере CSS. (вы можете захотеть поиграть с верхним размещением или чем-то еще, чтобы держать его на самом верху и в предпочтительном месте, когда он не нужен сверху)

См. Например:

<script type="text/javascript">
var fixed = false;

onscroll = function() 
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 200) 
    {
        if (!fixed) 
        {
            $('.navbar-wrapper').css({ position: 'fixed', top : 0 });
            fixed = true;
            }
    } 
    else 
    {
        if (fixed)  
        {
            $('.navbar-wrapper').css({ position: 'relative', top : 200 });
              fixed = false;
        }
    }
}
</script>

Green Wizard · Answer 2 · 2014-01-20T12-19-00.000Z

Это может быть ваш css

body{
    height:1000px;
}

div{
width:200px;
    height:100px;
    background:red;
    position:relative;
    top:200px;
}

.fixedClass{
position:fixed;
top:0;
}

код jquery

$(window).scroll(function(){
if($(window).scrollTop() > 200){ // position of menu from the top 
$('div').addClass('fixedClass');
}
else{
$('div').removeClass('fixedClass');
}
})

Html: P

<div>
</div>

рабочая скрипка

Спасибо всем за ваше время и ответы, но я имел в виду, как сделать это на чистом javaScript, кто-нибудь знает, как это сделать на чистом javascript?

phpCore · Answer 3 · 2014-01-20T10-50-00.000Z

При изучении исходного кода вы можете просмотреть часть javascript, которая контролирует этот бар. http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8. Вместо:

$('#alrp-slidebox').animate({'right':'0px'},300);

Положил:

$('#yourContent').animate({'top':'0px'},300);

И для (мы предполагаем, что высота ящика составляет 300 пикселей):

$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100);

Положил:

$('#yourContent').stop(true).animate({'top':'-300px'},100);