HTML5 / jQuery - вертикальное скольжение страниц - PullRequest
Новая
       14

HTML5 / jQuery - вертикальное скольжение страниц

2 голосов
/ 15 марта 2012

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

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

На Tumblr.com есть что-то вроде этого, но не совсем то, что я ищу. http://www.w3.org/html/logo есть что-то подобное, единственное, чего здесь не хватает, это меню, которое следует вниз, когда страница прокручивается.

Может кто-нибудь помочь мне пролить свет на это? Или приведите несколько примеров?

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

Ответы [ 4 ]

2 голосов
/ 15 марта 2012

Все, что вам нужно сделать, это получить вертикальное смещение элемента, к которому вы хотите прокрутить, а затем анимировать свойство scrollTop для элемента window (или любого элемента, который вы прокручиваете): 

//bind to all links whose `href` attribute starts with a hash
$('a[href^="#"]').on('click', function () {

    //get the offset from the document's top for the element targeted in the links `href` attribute
    var offset = $($(this).attr('href')).offset().top;

    //scroll the document, some browsers use `html`, some use `body`
    $('html, body').stop().animate({ scrollTop : offset }, 1000);
});

Вот демоверсия: http://jsfiddle.net/wCgA7/1/

Обратите внимание, что если вы дадите навигацию position:fixed, вы можете прикрепить ее к верхней части порта просмотра.

0 голосов
/ 15 марта 2012

Я использовал модифицированную версию этого JQuery кода: 

// animate to anchor link
$('nav a').click(function() {
   $('nav li').removeClass('selected');
   $(this).parent().addClass('selected');
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 500);
   return false;
});  
// update active links on scroll
$(window).scroll(function(){
    var pos = $(window).scrollTop();
    var height =  $(window).height();

    $('nav li').each(function(){
        if( ( pos >= $(this).offset().top )){
            $('nav li').removeClass();
            $(this).addClass('selected');                  
        }
    });
});
0 голосов
/ 15 марта 2012

Для «следующего» меню посмотрите на фиксированное положение .Элементы CSS position: fixed всегда

остаются на одном месте относительно области просмотра после прокрутки

0 голосов
/ 15 марта 2012
...