1

My main objective is to have the whole webpage scroll on creation without allowing the projects div to scroll. Then once you scroll an arbitrary amount of pixels, centering the projects div on the window, the only you can scroll is the the projects div. When the main_content div becomes fixed and it's top position gets changed from 0, I am getting 2 problems.

1) The screen blinks if while I'm scrolling my cursor is in the middle of the screen. (I've tried fixing this by adding -webkit-backface-visibility: hidden; to the css sheet, But it still blinks a little)

2) If, while scrolling, your cursor is in the black while and the fixed class is added to main_content, the page jumps up instead of staying put. This isn't happening for me in chrome, just safari.

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

Here is a fiddle, but it won't produce the error that safari is giving me. 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 {

        }

    });

});
4

1 回答 1

1

由于滚动事件（$(window).scroll(function(){});）中的代码，页面正在跳转。

  1. $('.main_content').addClass('fixed'); 固定类中的“顶部”值从 0 开始。
  2. $('.fixed').css({ 'top': -stopLine }); 'top' 值更改为 -stopLine 值。

因为这两段代码都发生在下一个滚动事件被调用之前，所以当触发多个滚动事件（连续滚动）时，用户会体验到窗口中的跳转。页面固定在 top:0，然后移动到 top:-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
 );
 //###################################
于 2013-07-25T21:12:34.587 回答