HTML

Question

我的主要目标是让整个网页滚动创建，而不允许项目div滚动。然后，一旦滚动任意数量的像素，将项目div居中放在窗口上，唯一可以滚动的是项目div。当main_content div固定并且它的顶部位置从0变为时，我遇到了2个问题。

1）如果我滚动光标在屏幕中间，屏幕会闪烁。（我试过通过添加来解决这个问题 -webkit-backface-visibility：hidden; 到css表，但它仍然有点眨眼）

2）如果在滚动时光标处于黑色而固定类被添加到main_content，则页面会跳起而不是保持放置。这不是我在chrome中发生的，只是狩猎。

照片 - http://farm4.staticflickr.com/3793/9293713553_ee3baf8d9d_b.jpg

这是一个小提琴，但它不会产生safari给我的错误。 http://jsfiddle.net/chongwaldo/6mkDS/

HTML

<!DOCTYPE html>
    <html>
        <head>
            <link href="Scrolling_Test.css" rel="stylesheet">
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type='text/javascript' src='Scrolling_Test.js'></script>
        </head>

        <body>
            <div class="main_content">
                <div class="black top">
                </div>

                <div class="projects">
                    <div class="window project_1">
                    </div>
                    <div class="window project_2">
                    </div>
                    <div class="window project_3">
                    </div>
                </div>

                <div class="black bottom">
                </div>
            </div>
        </body>
    </html>

CSS

html, body {
    margin:0px;
    -webkit-backface-visibility: hidden;
}

div {
    width:100%;
    -webkit-backface-visibility: hidden;
}

.main_content {
    position:absolute;
    top:0;
    left:0;
}

.black {
    background-color:#000;
    height:800px;
}

.fixed {
    position:fixed !important;
    top:0;
    left:0;
}
.scroll {
    overflow:scroll !important;
}

.projects {
    height:700px;
    overflow:hidden;
}

.window {
    height:700px;
}

.project_1 {
    background-color:#addfe7;
}
.project_2 {
    background-color:#b0e8e6;
}
.project_3 {
    background-color:#b9eadd;
}

的jQuery

$(document).ready(function() {

    var $window = $(window), // Cache the window object
        stopLine = 550,
        dir = 'down', // direction
        lastScroll = 0;

    $('.window').text(dir);

    // Execute when window scrolls
    $(window).scroll(function(){ // scroll event
        var fromTop = $window.scrollTop();

        $('.window').text(dir);
        $('.window').append('<br/>'+fromTop);

        // Get scrolling direction
        if(fromTop > lastScroll){ dir = 'down'; }
        else { dir = 'up'; }

        // Set new lastScroll value
        lastScroll = fromTop;

        if( dir === 'down' &&
            fromTop >= stopLine){

            $('.main_content').addClass('fixed');
            $('.projects').addClass('scroll');

            $('.fixed').css({
                'top': -stopLine
            });


        } else {

        }

    });

});

Answer 1

由于滚动事件中的代码（ $（window）.scroll（function（）{}）; ），页面跳了起来。

$（'。main_content'）。addClass（'fixed'）; 固定类中的'top'值从0开始。
$（'。fixed'）。css（{'top'： - stopLine}）; 'top'值更改为-stopLine值。

因为这两段代码都在下一个滚动事件被调用之前发生，所以当触发多个滚动事件（连续滚动）时，用户会在窗口中跳转。页面固定在顶部：0，然后移动到顶部：-stopLine，全部在下一次滚动之前。

为了抵消顶部的 ，我只是在页面中添加了一个scrollTop（），以便在滚动继续之前使窗口变得均匀。

这个， $（'html，body'）。scrollTop（ stopLine ） ，添加 -webkit-backface-visibility：hidden 到css停止闪烁和跳跃。

jsfiddle - http://jsfiddle.net/chongwaldo/mmdDD/

添加了JQuery

 // Block must stay in order
 //###################################
 /*(1)*/$('.main_content').addClass('fixed');
 /*(2)*/$('.projects').addClass('scroll');
 /*(3)*/$('.fixed').css({
    'top': -stopLine
 });
 /*(4)*/$('html, body').scrollTop(
    stopLine
 );
 //###################################

jquery混合滚动问题

HTML

CSS

的jQuery

1 个答案:

添加了JQuery