Question

我有以下代码： -

HTML

<div id="header"></div>
<div id="content">
    <div class="sidebar-wrapper"></div>
</div>
<div class="sessions-wrapper"></div>
<div id="footer"></div>

CSS

#header {
  height: 600px;
  width: 100%;
  background: black;
}
#content {
  height: 2000px;
  width: 100%;
  background: #eeeeee;
}

.sidebar-wrapper {
    width: 100%;
    height: 350px; /*depends on content*/
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    padding: 20px;
    margin-top: 50px;
}

.sessions-wrapper {
  height: 200px;
  width: 100%;
  background: #000000;
}

#footer {
  width: 100%;
  height: 500px;
  background: #888;
}

的jQuery

jQuery.fn.scrollBottom = function() {
    return jQuery(document).height() - this.scrollTop() - this.height();
};

var sidebar = jQuery('.sidebar-wrapper');
var pwindow = jQuery(window);
var sessions = jQuery('.sessions-wrapper');
var sidebar_gap = sidebar.offset().top;

pwindow.bind("scroll resize", function() {
    var gap = pwindow.height() - sidebar.height() - 10;
    var sessions_gap = sessions.offset().top - sidebar.offset().top;
    var visibleFoot = 172 - pwindow.scrollBottom();
    var scrollTop = pwindow.scrollTop()

    if(scrollTop > sidebar_gap - 140 && sessions_gap > 750 && visibleFoot < -850) {
        sidebar.css({
            'position': 'fixed',
            'top': '100px',
            'width': '100%'
        });
    } else if (sessions_gap < 750 && visibleFoot > -850) {
        sidebar.css({
            'position': 'static',
            'top': '0px',
            'width': '100%'
        });
    } else {
        sidebar.css({
            'position': 'static',
            'top': '0px',
            'width': '100%'
        });
    }
});

VIEW JSFIDDLE

当sidebar-wrapper沿着页面向下滚动页面直到它到达底部时。而不是sidebar-wrapper回到原来的位置时，我希望能够让这个元素保持在它消失的位置，然后在你回到页面时滚动。

我这样做是因为这个功能可以在具有相同元素但内容不同的不同页面上工作（因此每个页面上元素的高度会有所不同）

先谢谢，如果我不清楚，请告诉我。

Answer 1

我认为这个脚本可以满足您的要求：

<script type='text/javascript'>
  jQuery.fn.scrollBottom = function() {
    console.log('scrollBottom');
    return jQuery(document).height() - this.scrollTop() - this.height();
};

var sidebar = jQuery('.sidebar-wrapper');
var pwindow = jQuery(window);
var sessions = jQuery('.sessions-wrapper');
var sidebar_gap = sidebar.offset().top;

var content = $('#content');

// original sidebar position
var original_sidebar_top = sidebar.position().top;    
var desired_offset = 140;
var separation = 20;

pwindow.bind('scroll resize', function() {
    // sidebar & header height
    var sb_height = sidebar.height();        
    var header_height = $('#header').height();
    var scrollTop = pwindow.scrollTop();        

    // compute the real offset in screen (not the document)
    var screen_offset_ss = sessions.offset().top - scrollTop;        
    var distance = desired_offset+sb_height+separation;

    // there's space for the sidebar
    if (distance < screen_offset_ss) {
        // header is not showing, fix sidebar position
        if (scrollTop > header_height-desired_offset) {
            console.log('fixed');
            sidebar.css({
                'position': 'fixed',
                'top': desired_offset+'px'
            });
        }
        // header is showing, return sidebar to original position
        else {
            console.log('static');
            sidebar.css({
                'position': 'static',
                'top': original_sidebar_top+'px'
            });                
        }
    }

    // there's no space for the sidebar
    else {
        console.log('20px');
        sidebar.css({
            'position': 'relative',                
            // place the sidebar right above the sessions (with separation)
            'top': sessions.offset().top - content.position().top - sb_height - separation
        });
    }
});
</script>

这里是JSFiddle。

请注意我在CSS中所做的更改。它引起了一个问题（眨眼）。

.sidebar-wrapper {
    width: 100%;
    height: 350px; /*depends on content*/
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    /*padding: 20px;         commented*/
    /*margin-top: 50px;      commented*/
}

如果您仍想要保证金，最好将其作为margin-bottom:50px;

中的#content。

Answer 2

试试这个：

    if(scrollTop > 500 && sessions_gap > 750 && visibleFoot < -850) {
        sidebar.css({
            'position': 'fixed',
            'top': '100px',
            'width': '100%'
        });
    } else if (scrollTop > 500 && sessions_gap > 750 && visibleFoot >= -850) {
        sidebar.css({
            'position': 'relative',
            'top': (gap+700)+'px',
            'width': '100%'
        });
    } else {
        sidebar.css({
            'position': 'static',
            'top': '0px',
            'width': '100%'
        });
    }

我不知道为什么但是这个div在JSFiddle上闪烁，我不知道它是否会在其他地方做同样的事情。

jQuery - 一旦元素滚动到某一点

2 个答案: