jquery - 使用 JQuery 粘性/跟随侧边栏但框标题图像不随文本移动?

标签 jquery html css sidebar sticky

提前,谢谢。

我一直在使用来自 HERE 的粘性侧边栏代码并且我通过向框中添加图像标题来自定义样式,但是当它到位时它不会跟随您可以在这里看到的文本:thomas-dixon.com/joomla .

这是我使用的代码:

[view-source:http://thomas-dixon.com/joomla/][3]

感谢您的帮助。

最佳答案

演示:http://jsfiddle.net/enve/hjeBP/

将您的 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>

工作演示:http://jsfiddle.net/enve/hjeBP/

关于jquery - 使用 JQuery 粘性/跟随侧边栏但框标题图像不随文本移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12009717/

相关文章:

css - css中的.class1.class2和.class1.class2有什么区别?

javascript - Extjs 6.2 - 如何设置 TreeStore 上节点的大小

javascript - 如何用javascript向服务器发送数据

javascript - 使用工具提示进行 jQuery ASP 输入验证

javascript - html5 Canvas 中心圆

javascript - 输入字段在收到值后不刷新

css - 使用 ES6 时如何在 React 组件中应用 css?

javascript - jquery如何从输入中获取准确的值

javascript - 使用 jQuery vs Polymer vs Dust.js 创建和重用自定义元素

javascript - 相互调用两个javascript函数