当 2/3s 的 div 在视口中时触发 jQuery [英] jQuery trigger when 2/3s of div are in viewport

查看：24
本文介绍了当 2/3s 的 div 在视口中时触发 jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要更改一页网站上的活动"菜单项，当用户向下或向上滑动并且在视口中可以看到三分之二的 div 时.我找到了一些 jQuery 插件，但都是在查看整个 div 时.

只是我需要像在这个页面上一样:https://vivaldi.com/

我的页面将类似于:http://jsfiddle.net/kwbddvau/2/

html{height:calc(100% - 100px) !important;width:100% !important;边距:0px；填充:0px;}身体{高度:500％！重要；宽度:100％！重要；边距:0px；填充:0px;}.page {height:20% !important;宽度:100%！重要；}#page1{背景色:红色；边距顶部:100px;}#page3{背景颜色:绿色；}#page5{背景颜色:蓝色；}#menu{宽度:100%;高度:100px；颜色:#fff;背景颜色:黑色；位置:固定；顶部:0像素}#menu a {颜色:白色；文字装饰:无；}#menu a.active {颜色:红色；文字装饰:下划线；}

<div id="menu"><div id="menu"><a href="#page1"class="active">Home|<a href="#page2">第 2 页</a>|<a href="#page3">第 3 页</a>|<a href="#page4">第 4 页</a>|<a href="#page5">第 5 页</a></div>

<div id="page1" class="page">第1页

<div id="page2" class="page">第2页

<div id="page3" class="page">第3页

<div id="page4" class="page">第4页

<div id="page5" class="page">第5页

解决方案

尝试

var page = $(".page"), menu = $("#menu");$(window).on("scroll", function (e) {var res = $.grep(page, function (el) {返回 el.getBoundingClientRect().top <= 180 &&(el.getBoundingClientRect().bottom >= 180)});var id = res.slice(-1)[0].id;menu.find("." + id).addClass("活动").兄弟姐妹().removeClass("活动")}).滚动();

jsfiddle http://jsfiddle.net/kwbddvau/8/

<小时>

var page = $(".page"), menu = $("#menu");$(window).on("scroll", function (e) {var res = $.grep(page, function (el) {返回 el.getBoundingClientRect().top <= 180 &&(el.getBoundingClientRect().bottom >= 180)});var id = res.slice(-1)[0].id;menu.find("." + id).addClass("活动").兄弟姐妹().removeClass("活动")}).scroll();

html {高度:计算(100% - 100px)！重要；宽度:100%！重要；边距:0px；填充:0px;}身体 {高度:500%！重要；宽度:100%！重要；边距:0px；填充:0px;}.页 {高度:20%！重要；宽度:100%！重要；}#page1 {背景颜色:红色；边距顶部:100px；}#page3 {背景颜色:绿色；}#page5 {背景颜色:蓝色；}#菜单 {宽度:100%；高度:100px；颜色:#fff;背景颜色:黑色；位置:固定；顶部:0像素}.积极的 {边框底部:2px 纯红色；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><div id="菜单"><span class="page1">MENU</span><span class="page2">MENU</span><span class="page3">MENU</span><span class="page4">MENU</span><span class="page5">MENU</span>

<div id="page1" class="page">page1</div><div id="page2" class="page">page2</div><div id="page3" class="page">page3</div><div id="page4" class="page">page4</div><div id="page5" class="page">page5</div>

I need to change "active" menu item on one-page website, when user slide down or up and something like two thirds of div are visible in viewport. I found some jQuery plugins, but all of them was when whole div is viewed.

Simply I need to act same like on this page: https://vivaldi.com/

And my page will look something like: http://jsfiddle.net/kwbddvau/2/

html{height:calc(100% - 100px) !important;width:100% !important; margin:0px; padding:0px;}

body{height:500% !important;width:100% !important; margin:0px; padding:0px;}

.page {height:20% !important; width:100% !important;}

#page1{background-color:red; margin-top: 100px;}

#page3{background-color:green;}

#page5{background-color:blue;}

#menu{width: 100%; height: 100px; color: #fff; background-color: black; position: fixed; top:0px}

#menu a {color: white; text-decoration:none;}

#menu a.active {color: red; text-decoration:underline;}

<div id="menu"><div id="menu"><a href="#page1" class="active">Home</a> | <a href="#page2">Page 2</a> | <a href="#page3">Page 3</a> | <a href="#page4">Page 4</a> | <a href="#page5">Page 5</a></div>
</div>
<div id="page1" class="page">
page1
</div>
<div id="page2" class="page">
page2
</div>
<div id="page3" class="page">
page3
</div>
<div id="page4" class="page">
page4
</div>
<div id="page5" class="page">
page5
</div>

解决方案

Try

var page = $(".page")
, menu = $("#menu");
$(window).on("scroll", function (e) {    
    var res = $.grep(page, function (el) {
        return el.getBoundingClientRect().top <= 180 && (el.getBoundingClientRect().bottom >= 180)
   });
    var id = res.slice(-1)[0].id;  
    menu.find("." + id)
    .addClass("active")
    .siblings()
    .removeClass("active")   
}).scroll();

jsfiddle http://jsfiddle.net/kwbddvau/8/

var page = $(".page")
, menu = $("#menu");
$(window).on("scroll", function (e) {    
var res = $.grep(page, function (el) {
    return el.getBoundingClientRect().top <= 180 && (el.getBoundingClientRect().bottom >= 180)
   });
var id = res.slice(-1)[0].id;  
menu.find("." + id)
.addClass("active")
.siblings()
.removeClass("active")   
}).scroll();

html {
    height:calc(100% - 100px) !important;
    width:100% !important;
    margin:0px;
    padding:0px;
}
body {
    height:500% !important;
    width:100% !important;
    margin:0px;
    padding:0px;
}
.page {
    height:20% !important;
    width:100% !important;
}
#page1 {
    background-color:red;
    margin-top: 100px;
}
#page3 {
    background-color:green;
}
#page5 {
    background-color:blue;
}
#menu {
    width: 100%;
    height: 100px;
    color: #fff;
    background-color: black;
    position: fixed;
    top:0px
}
.active {
    border-bottom:2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="menu"> <span class="page1">MENU</span>  <span class="page2">MENU</span>  <span class="page3">MENU</span>
 <span class="page4">MENU</span>  <span class="page5">MENU</span>

</div>
<div id="page1" class="page">page1</div>
<div id="page2" class="page">page2</div>
<div id="page3" class="page">page3</div>
<div id="page4" class="page">page4</div>
<div id="page5" class="page">page5</div>

这篇关于当 2/3s 的 div 在视口中时触发 jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆