jquery 监听元素滚动

关于如何使元素保持可见的jQuery快速代码段。 为使演示向下滚动到博客上的任何页面并在右侧栏中显示广告，在您向下滚动页面时，它们仍处于查看状态。 然后，当您再次向上滚动时，返回普通视图。

演示版

向下滚动此页面，然后查看右侧边栏。

代码

//keep element in view
(function($)
{$(document).ready( function(){var elementPosTop = $('#jq4u-sidebar-ads').position().top;$(window).scroll(function(){var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();//if top of element is in viewif (wintop > elementPosTop){//always in view$('#jq4u-sidebar-ads').css({ "position":"fixed", "top":"10px" });}else{//reset back to normal viewing$('#jq4u-sidebar-ads').css({ "position":"inherit" });}});});
})(jQuery);

把它变成一个插件

可以很容易地制成jQuery插件。 实际上，我将快速编写出一个完整的代码，并将其包含在下面。

/***  jQuery keep element in view plugin.**  @author      Sam Deering*  @copyright   Copyright (c) 2012 jQuery4u*  @license     http://jquery4u.com/license/*  @link        http://jquery4u.com*  @since       Version 1.0*  @notes       Plugin only works on scroll down elements.**/(function($)
{$.fn.keepElementInView = function(){var elemPosTop = this.position().top;$(window).scroll(function(){var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();if (wintop > elemPosTop){this.css({ "position":"fixed", "top":"10px" });}else{this.css({ "position":"inherit" });}});return this;};$(document).ready( function(){jQuery('#jq4u-sidebar-ads').keepElementInView();});
})(jQuery);

翻译自: https://www.sitepoint.com/jquery-element-view-scrolling/

jquery 监听元素滚动