1

4 つの div を持つ単一ページの ScrollTo Web サイトを構築しています。これらの div は私のページを表します。

Home -> My work -> About me -> Contact

幅と高さは、ボディロードまたはサイズ変更時にユーザーの画面解像度を読み取る小さな JavaScript によって定義されます。したがって、div は常にユーザー画面の内側の幅と高さになります。

function resize() {

    document.getElementById("home").style.height = viewportheight+"px";
    document.getElementById("work").style.height = viewportheight+"px";
    document.getElementById("about").style.height = viewportheight+"px";
    document.getElementById("contact").style.height = viewportheight+"px";

私が達成しようとしているのは、ユーザーがスクロールすると (たとえば、100px 上下に移動すると)、ウィンドウが自動的に最も近い div の上部にスナップすることです。

何かのようなもの：

onScroll("100px") up or down { scrollTo("closest #div") };
4

2 に答える 2

0

ここから始めるために使用できる方法は次のとおりです。

//OnScroll:
$(window).scroll(function(){
   //Get current scoll position:
   var iSrollT = $(document).scrollTop();
   //Get the position of your element:
   var iOffT = $('#home').offset().top;
 });

//Set scroll top using an animation:
$('html, body').animate({       
   scrollTop: iOffT
}, 300);

ただし、さらに実装する必要があります...たとえば、scollの位置が常に次のdivにスナップし、scollingが不可能になるのを防ぎます。

于 2013-02-25T16:04:59.013 に答える
0 
var STELLARJS = {
init: function() {
    var self = this;
    $(function(){
        self.$sections = $('#landing_page, #work, #about, #contact').each(function(index){
            $(this).data('sectionIndex', index);
        });

        self.handleEvents();

    });
},
handleEvents: function() {
    var self = this,
        //Debounce function from Underscore.js
        debounce = function(func, wait) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    func.apply(context, args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            }
        },
        handleScroll = function() {
            var scrollTop = $(window).scrollTop(),
                sectionIndex = Math.round((scrollTop) / self.$sections.first().outerHeight()),
                $activeSection = self.$sections.eq(sectionIndex);

            if ($activeSection.length === 0) {
                $activeSection = self.$sections.last();
            }

            if ($activeSection.length === 0) return;

            $(window).unbind('scroll.stellarsite');

            if (scrollTop === 0) {
                $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
            } else {
                $('html,body').animate({
                    scrollTop: $activeSection.offset().top
                }, 600, 'easeInOutExpo', function() {
                    setTimeout(function(){
                        $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                    }, 10);
                });
            }

            $(window).bind('mousewheel', function(){
                $('html,body').stop(true, true);
            });

            $(document).bind('keydown', function(e){
                var key = e.which;

                if (key === 37 || key === 39) {
                    $('html,body').stop(true, true);
                }
            });
        };

    if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
        $(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
    }
} });
于 2013-02-26T15:34:30.813 に答える