以后地位:首页 > 建站常识 > 列表

DIV随页面转动遇顶牢固的几种方式

点击: 次时辰:2016/12/9关头词:上海网页建造 div css css排版
div层随屏幕转动遇顶牢固的智能浮动结果 下载响应代码 智能浮动结果的完成道理 它分两种状况,一是默许状况,二是浮动固顶状况。默许状况便是默许状况,甚么也不必做,坚持原本的CSS就好。不管有不对它做定位,做了absolute也好,没做也好,都行。关头是当浏

DIV随页面转动遇顶牢固的几种方式

div层随屏幕转动遇顶牢固的智能浮动结果 下载响应代码

智能浮动结果的完成道理

它分两种状况,一是默许状况,二是浮动固顶状况。

默许状况便是默许状况,甚么也不必做,坚持原本的CSS就好。不管有不对它做定位,做了absolute也好,没做也好,都行。

关头是当阅读器屏幕转动时,该工具div层要移除阅读器界面视区的时辰,是要点窜它的position属性,让它浮动在窗口的上沿显现就好了。最好的position属性是fixed,能够在IE6+和其余阅读器浮动层光滑的牢牢固位,因为IE6老迈哥不撑持fixed属性,以是能够别的付与它absolute属性。固然也会发生副感化——转动不光滑。不过也无所谓了,在微软发布不再修补更新XP缝隙,在中国360宁静卫士的赞助下固然大师依然操纵XP,但IE的用户已是少之又少了。

那接上去,若何判定以后div层与阅读器窗口的上边缘打仗了呢?碰到阅读器顶部了呢?

当浮动层div与阅读器窗口上边缘打仗的一刹时,其页面垂直偏移值与页面的转动高度是分歧的,以是咱们就用这个停止判定。那若何获得页面上元素间隔页面的垂直间隔呢?

这里则是操纵javaScript库完成。

1、第一种完成div层智能浮动的方式

具体代码以下:

$.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));      });};

挪用实在很简略,将须要浮动的方针层div所设定的id,增加到以下函数代码,以下:

$("#fixed").smartFloat();

如许两段代码就能够完成ID为fixed的层有了智能浮动结果,当该层在页面转动时,与阅读器上边缘打仗时就会牢固顶部,不再跟从转动条而转动了。当转动回下面时,又会复原成原有状况。固然,别健忘在页面head之前挪用jquery库呀。具体代码与紧缩包请在文章开端下载!

2、第二种完成div层的智能浮动结果方式

与前面的方式差未几,只是语句更简略一些,固然逻辑上是不这么松散吧。

function scrollLis(){var toTop = offs.top-$(window).scrollTop();if(toTop==0||toTop<0){ if(!$('#fixed').hasClass('ab'))$('#fixed').addClass('ab');}else{ $('#fixed').removeClass('ab');}}

它的挪用就多了几句代码了,一样是放在层的前面,以ID标签fixed为名:


var offs=$('#fixed').offset();$(window).scroll(function(){scrollLis();});


以上两种方式咱们都在差别的阅读器下测试经由过程,包含了360宁静阅读器、搜狗、火狐、IE6~9、漫游等等。

div层随屏幕转动遇顶牢固的智能浮动结果 下载响应代码

预定建站
收费供给网站优化
支付关头词