页面滚动浮动层智能定位(jQuery)实例页面

最新推荐文章于 2024-07-19 12:58:53 发布

weixin_33847182

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量60

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://my.oschina.net/jsan/blog/17385

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
        <script type="text/javascript">

$.fn.smartFloat = function() {

    var position = function(element) {

        var top = element.position().top, pos = element.css("position");

        $(window).scroll(function() {

            var scrolls = $(this).scrollTop();

            if (scrolls > top) {

                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });    
                } else {
                    element.css({
                        top: scrolls
                    });    
                }

            }else {
                element.css({
                    position: pos,
                    top: top
                });    
            }
        });
    };

    return $(this).each(function() {
        position($(this));                        

    });

};
</script>

</head>

<body>
 
  <div style="width:100%;height:1500px;">
      
          <div style="padding:20px;">你可以在这里选择你想要的商品</div>
          <div>
                奔驰<br/>
                宝马<br/>
                法拉利<br/>
                悍马<br/>    
          </div>
          
          <div id="float" style="width:90%;border:1px solid #ffecb0; background-color:#fffee0; padding:10px;">
                 我现在在这里，等你滚动滚动条时，我就会始终保持在页面顶部。
          </div>
          
          <div style="padding:20px;">我喜欢宝马和悍马，O(∩_∩)O~</div>
          
          
  </div>
 <script type="text/javascript">
   $(function(){                   
                //绑定
                $("#float").smartFloat();
       });    
 </script>

</body>

转载于:https://my.oschina.net/jsan/blog/17385