常用的根据高度自动切换效果

所属分类:UI-滚动

 28265  344  查看评论 (9)
分享到微信朋友圈
X
常用的根据高度自动切换效果 ie兼容8

自动 根据高度 来添加属性  

下面附上核心代码

看完整的 可以下载文件 

$(window).scroll(function() {
	var top = $(document).scrollTop(); //定义变量,获取滚动条的高度
	var menu = $("#menu"); //定义变量,抓取#menu
	var items = $("#content").find(".item"); //定义变量,查找.item
	var curId = ""; //定义变量,当前所在的楼层item #id 
	items.each(function() {
		var m = $(this); //定义变量,获取当前类
		var itemsTop = m.offset().top; //定义变量,获取当前类的top偏移量
		if (top > itemsTop - 10) {
			curId = "#" + m.attr("id");
		} else {
			return false;
		}
	});


相关插件-滚动

新闻向下翻滚更新

新闻向下翻滚更新
  滚动
 35672  431

jQuery自定义滚动条插件

支持IE9及以上,360,谷歌,火狐的自定义滚动条,可以设置滚动条的初始位置以及滚动条的颜色等
  滚动
 27157  316

HTML5单页面全屏滚动特效

全屏滚动代码简单,非常适合新手。
  滚动
 54524  474

jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 56261  628

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    褚林秣 0
    2019/1/2 14:16:09
    正好需要这个效果的控件 回复
    ■盛夏光年. 1
    2016/12/17 11:12:33

    可以是

    var h=$(window).height();
    $("#content .item").css('height',h+'px')
    回复
    川海技术部 -毛正敏 0
    2016/8/15 15:08:08
    正好需要!谢谢分享 回复
    倾_ 听 ? 1
    2016/2/4 9:02:14

    对代码做了一些优化。你这里的话应该是content .item

    var h=$(window).height();
    $("#content .item").css('height',h+'px')
    回复
    倾_ 听 ? 2
    2016/2/4 9:02:07

    自动读取浏览器的高度,不设置固定的高。CSS里面的高度都可以删掉了。

    <script>
    $(function(){
        var h=$(window).height();
        $("#content li").css('height',h+'px')
    });
    </script>
    回复
    小希 0
    2015/9/22 14:09:48

    不错不错,解决了一直困扰我的问题

    回复
    朗读者 0
    2015/8/31 15:08:44

    赞一个,谢谢楼主!

    回复
    祈丶万家灯火 0
    2015/8/26 17:08:45

     你可以把他们的高度 变得更高 这样就可以了 下面要有东西也可以

    回复
    ??太阳清辉? 。 0
    2015/8/26 15:08:29

    到了fir没背景色

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复