Как сделать, чтобы div переместился в верхнюю часть экрана после того, как он будет прокручен? - PullRequest
Новая
       67

Как сделать, чтобы div переместился в верхнюю часть экрана после того, как он будет прокручен?

279 голосов
/ 01 августа 2009

Я хотел бы создать элемент div, расположенный под блоком контента, но который после того, как страница будет прокручена достаточно, чтобы соприкоснуться с ее верхней границей, зафиксируется и прокрутится вместе со страницей.

Ответы [ 22 ]

0 голосов
/ 03 мая 2019

Вы можете сделать это с помощью метода jQuery css(): 

$('#myDiv').css({'position':'sticky','top':'5px'});
0 голосов
/ 11 ноября 2010

У меня есть настройки ссылок в div, так что это вертикальный список буквенных и цифровых ссылок. 

#links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

Затем я настроил эту удобную функцию jQuery, чтобы сохранить загруженную позицию, а затем изменил положение на фиксированное при прокрутке за пределы этой позиции.

ПРИМЕЧАНИЕ: это работает, только если ссылки видны при загрузке страницы !! 

var listposition=false;
jQuery(function(){
     try{
        ///// stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //    console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)');
    }
});
Страница:
...