Jquery 页面刷新时的粘性侧边栏可见性
我使用twentyeleven WP主题的粘性边栏脚本作为twentyeleven子主题。一切都很好,甚至边栏在页面刷新时也保持在最后的位置(如我所愿)。唯一的小问题是,当访问者刷新页面时,侧边栏不会出现,访问者必须开始滚动以查看侧边栏 我使用jqueryv。1.11.3 剧本:Jquery 页面刷新时的粘性侧边栏可见性,jquery,wordpress,sidebar,sticky,page-refresh,Jquery,Wordpress,Sidebar,Sticky,Page Refresh,我使用twentyeleven WP主题的粘性边栏脚本作为twentyeleven子主题。一切都很好,甚至边栏在页面刷新时也保持在最后的位置(如我所愿)。唯一的小问题是,当访问者刷新页面时,侧边栏不会出现,访问者必须开始滚动以查看侧边栏 我使用jqueryv。1.11.3 剧本: ( function( $ ) { var $body, $window, $sidebar, adminbarOffset, top = false, bottom = false, wind
( function( $ ) {
var $body, $window, $sidebar, adminbarOffset, top = false,
bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
secondary, button;
// Sidebar scrolling.
function resize() {
windowWidth = $window.width();
if (1102 > windowWidth) {
top = bottom = false;
$sidebar.removeAttr('style');
}
}
function scroll() {
var windowPos = $window.scrollTop();
if (1102 > windowWidth) {
return;
}
sidebarHeight = $sidebar.height();
windowHeight = $window.height();
bodyHeight = $body.height();
if (sidebarHeight + adminbarOffset > windowHeight) {
if (windowPos > lastWindowPos) { // scroll down
if (top) {
top = false;
topOffset = ($sidebar.offset().top > 0) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr('style', 'top: ' + topOffset + 'px;');
} else if (! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight) {
bottom = true;
$sidebar.attr('style', 'position: fixed; bottom: 0; margin: 0');
}
} else if (windowPos < lastWindowPos) { // scroll up
if (bottom) {
bottom = false;
topOffset = ($sidebar.offset().top > 0) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr('style', 'top: ' + topOffset + 'px;');
} else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
top = true;
$sidebar.attr('style', 'position: fixed; margin: 0');
}
} else {
top = bottom = false;
topOffset = ($sidebar.offset().top > 0) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr('style', 'top: ' + topOffset + 'px;');
}
} else if (! top) {
top = true;
$sidebar.attr('style', 'position: fixed; margin: 0');
}
lastWindowPos = windowPos;
}
function resizeAndScroll() {
resize();
scroll();
}
$(document).ready( function() {
$body = $(document.body);
$window = $(window);
$sidebar = $('#secondary').first();
adminbarOffset = $body.is('.admin-bar') ? $('#wpadminbar').height() : 0;
$window
.on('scroll.twentyeleven', scroll)
.on('load.twentyeleven', onResizeARIA)
.on('resize.twentyeleven', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeAndScroll, 500);
onResizeARIA();
} );
$sidebar.on('click.twentyeleven keydown.twentyeleven', 'button', resizeAndScroll);
*resizeAndScroll();
for (var i = 1; i < 6; i++) {
setTimeout(resizeAndScroll, 100 * i);
}*
});
} )( jQuery );
(函数($){
var$body、$window、$sidebar、adminbarOffset、top=false、,
底部=假,窗宽,窗高,lastWindowPos=0,
topOffset=0,车身高度,侧边栏高度,重设计时器,
二级按钮;
//侧边栏滚动。
函数resize(){
windowWidth=$window.width();
如果(1102>窗口宽度){
顶部=底部=错误;
$sidebar.removeAttr('style');
}
}
函数滚动(){
var windowPos=$window.scrollTop();
如果(1102>窗口宽度){
返回;
}
边栏高度=$sidebar.height();
windowHeight=$window.height();
bodyHeight=$body.height();
if(侧边栏高度+adminbarOffset>窗口高度){
如果(windowPos>lastWindowPos){//向下滚动
如果(顶部){
顶部=假;
topOffset=($sidebar.offset().top>0)?$sidebar.offset().top-adminbarOffset:0;
$sidebar.attr('style','top:'+topOffset+'px;');
}如果(!bottom&&windowPos+windowHeight>sidebarHeight+$sidebar.offset().top&&sidebarHeight+adminbarOffset0)?$sidebar.offset().top-adminbarOffset:0;
$sidebar.attr('style','top:'+topOffset+'px;');
}如果(!top&&windowPos+adminbarOffset<$sidebar.offset().top),则为else{
top=正确;
$sidebar.attr('style','position:fixed;margin:0');
}
}否则{
顶部=底部=错误;
topOffset=($sidebar.offset().top>0)?$sidebar.offset().top-adminbarOffset:0;
$sidebar.attr('style','top:'+topOffset+'px;');
}
}否则,如果(!顶部){
top=正确;
$sidebar.attr('style','position:fixed;margin:0');
}
lastWindowPos=windowPos;
}
函数resizeAndScroll(){
调整大小();
滚动();
}
$(文档).ready(函数(){
$body=$(document.body);
$window=$(window);
$sidebar=$('#secondary').first();
adminbarOffset=$body.is('.admin bar')?$('#wpadminbar').height():0;
$window
.on('scroll.twentyeleven',scroll)
.on('load.twentyeleven',onResizeARIA)
.on('resize.twentyeleven',function(){
clearTimeout(resizeTimer);
resizeTimer=setTimeout(resizeAndScroll,500);
onResizeARIA();
} );
$sidebar.on('click.twentyeven keydown.twentyeven','button',resize和scroll);
*调整大小并滚动();
对于(变量i=1;i<6;i++){
设置超时(大小和滚动,100*i);
}*
});
})(jQuery);
如何使页面在重新加载时可见?我试图将整个脚本放在$(document).load(function(){
中,但它不起作用,可能是我做得不好,或者我应该做些其他事情
提前感谢!据我所知,问题是侧边栏功能在scroll()函数中。导出
$sidebar.attr('style'....with the fixed position and visibility visible if necessary
此函数之外的某个位置(在(document.ready语句:)中更好)
还要补充一点:你有
windowPos > lastWindowPos
在刷新的页面上,您将不会进入此范围
询问您是否需要进一步帮助谢谢Dimitar…但是侧边栏功能也在Twenty15主题中的滚动功能中,但当您刷新页面时,它仍保留在最后一个侧边栏位置,并且也将可见:(缩小浏览器屏幕高度并刷新页面,您将看到).也许它使用了我没有复制的东西?