使用JQuery粘滞/跟随侧边栏,但框标题图像不';你不能跟着文字移动吗?

使用JQuery粘滞/跟随侧边栏,但框标题图像不';你不能跟着文字移动吗?,jquery,html,css,sidebar,sticky,Jquery,Html,Css,Sidebar,Sticky,提前,谢谢 我一直在使用来自的粘性边栏代码,并通过向框中添加图像标题来自定义样式,但在适当位置时,它不会跟随您可以在此处看到的文本: 以下是我使用的代码: [view-source:http://thomas-dixon.com/joomla/][3] 感谢您的帮助。演示: 将您的jQuery代码替换为: <script type="text/javascript"> $(function(){ // document ready if (!!$('#

提前,谢谢

我一直在使用来自的粘性边栏代码,并通过向框中添加图像标题来自定义样式,但在适当位置时,它不会跟随您可以在此处看到的文本:

以下是我使用的代码:

[view-source:http://thomas-dixon.com/joomla/][3]
感谢您的帮助。

演示:

将您的jQuery代码替换为:

<script type="text/javascript">
$(function(){ // document ready
  
  if (!!$('#sidebar-left-content').length) { // make sure "#sidebar-left-content" element exists
  
  var el = $('#sidebar-left-wrap');
  var stickyTop = $('#sidebar-left-content').offset().top; // returns number
  var footerTop = $('#footer').offset().top; // returns number
  var stickyHeight = $('#sidebar-left-content').height();
  var limit = footerTop - stickyHeight - 20;
  
  $(window).scroll(function(){ // scroll event
                   
                   var windowTop = $(window).scrollTop(); // returns number
                   
                   if (stickyTop < windowTop){
                   el.css({ position: 'fixed', top: 0 });
                   }
                   else {
                   el.css('position','static');
                   }
                   
                   if (limit < windowTop) {
                   var diff = limit - windowTop;
                   el.css({top: diff});
                   }
                   
                   });
  
  }
  });</script>

$(函数(){//文档准备就绪
if(!!$('#边栏左内容').length){//确保“#边栏左内容”元素存在
var el=$(“#侧边栏左换行”);
var stickyTop=$(“#侧边栏左内容”).offset().top;//返回数字
var footerTop=$('#footer').offset().top;//返回数字
var stickyHeight=$(“#侧边栏左侧内容”).height();
var limit=页脚顶部-粘滞高度-20;
$(窗口).scroll(函数(){//滚动事件
var windowTop=$(window).scrollTop();//返回数字
如果(粘贴顶部<窗口顶部){
css({位置:'fixed',顶部:0});
}
否则{
el.css(‘位置’,‘静态’);
}
如果(限制<窗口顶部){
var diff=限制-窗顶;
el.css({top:diff});
}
});
}
});
工作演示: