zoukankan      html  css  js  c++  java
  • js判断元素是否在可视区域里

    js部分:

    //监听滚动条滑动距离
    			$(window).on('scroll', function(){
    				var scrollTop = $(document).scrollTop()
    				var lines = $('.el_line')
    				if (scrollTop >= 380){
    					$('.el_topNav').css('opacity',1)
    				} else {
    					$('.el_topNav').css('opacity',0)
    				}
    				
    				for (var i = 0; i < lines.length; i++) {
    					var tops = $(lines[i]).offset().top - 84 // 循环出每个盒子到顶部的距离 84是我分割线的宽度 根据个人情况而定
    					var line_height = $('.el_commodity>ul').eq(i).outerHeight()// 循环出每个盒子的高度
    					 /*如果当前滚动的距离大于或者等于当前盒子到达顶部的距离 且
    					  *小于当前盒子到达顶部距离 与 当前盒子高度的和 
    					  *那么当前盒子就处于可视范围内
    					  * */
    					if ( scrollTop >= tops && screenTop < (tops + line_height)) {
    						$('.el_topNav>div').eq(i).addClass('el_active').siblings().removeClass('el_active') //添加某一个样式  i为当前盒子下标
    					}
    				}
    			})
    
  • 相关阅读:
    UML序列图
    接口初探
    Discuz初探
    Vim指令学习
    UCenter Home代码研读之space.php
    建站须知
    linux指令之文件的创建、查询、修改
    InitPHP初探
    php环境搭建
    Zend Framework学习之Zend_Db 数据库操作
  • 原文地址:https://www.cnblogs.com/yzyh/p/9029140.html
Copyright © 2011-2022 走看看