0

我有一个 html 布局，其中有一个内容的左井，而在右井中，有一个图像或其他一些内容块。在某些时候，当用户滚动并且右侧井中的内容块到达屏幕顶部时，它的位置会更改为固定。当它到达其父元素的底部时，它的位置将变为绝对位置并使用其父元素滚动到屏幕外。

我目前在这里设置了这个：http: //jsfiddle.net/jdhancock88/6hLJF/，我的 javascript/jquery 是：

$(document).ready(function() {
var offset = $('.rightWellContainer').offset(); /*gets top and left position of the div containing the image*/


$(window).scroll(function() {

    var scrollTop = $(window).scrollTop() +20; /*sets variable for the top of the window scroll, plus 20 (for the items's padding) */
    var specialHeight = $('.special .leftWell').height(); /*gets the height of the row containing the element */
    var imageHeight = $('.imageContainer img').height(); /*gets the height of the element */
    var mark = (offset.top +specialHeight - imageHeight); /*sets the mark at which the element should top scrolling and switch to position absolute by adding the element's start position (offset.top), to the row's height (specialHeight), minus the height of the object (right4Height)*/

    /* when the top of the object is less than the top of the window's scroll AND the object hasn't reached the bottom of the row (mark > scrollTop), add fixed class to freeze object in scroll */

    if (offset.top < scrollTop && mark > scrollTop) {
        $('.rightWellContainer').addClass('fixed');
        $('.rightWellContainer').css('top', 20);
    } 

    /*remove the fixed class when the object should scroll with it's row */

    else {
        $('.rightWellContainer').removeClass('fixed');
        $('.rightWellContainer').css('top', 0);
    } 

    /*if the top of the object hits the point (mark) where it's at the end of it's row as it scrolls off the window, add position absolute so the object scrolls up with the bottom of its row */

    if (scrollTop >= mark) {
        console.log("You hit the mark");
        $('.rightWellContainer').addClass('bottom');
        $('.rightWellContainer').css('top', specialHeight - imageHeight);
    }


    /*if the object has the absolute positioning on it already and falls back past the top of the window (scrollTop), place it back fixed within it's row by removing the class "bottom"*/

    if (scrollTop < mark && $('.rightWellContainer').hasClass('bottom')) {
        $('.rightWellContainer').removeClass('bottom');
    }
});

});

我想知道的是，如果我想在具有相同行为的单独父 div 中添加第二条正确的内容，我将如何设置我当前的 javascript/jquery 以将该行为应用于独立于每条正确的内容其他？

4

0 回答 0