我怎么知道浏览器何时到达浏览器的中心？当滚动条到达浏览器的中心而不是到达浏览器的末尾时，我需要加载内容。
当div浏览器窗口中显示一个JavaScript时,我需要运行一些JavaScript ,例如,当它滚动到,甚至重复时.我该怎么做呢？
基本结构:
<div class='page1'></div>
<div class='page2'></div>
<div class='page3'></div>
<div class='page4'></div>
CSS:
div {
float: left;
height: 500px;
width: 500px;
margin: 50px 0;
background: grey;
}
当我知道要指定哪个元素时,我找到了这个问题的答案,但我正在寻找的方法是检查'滚动'是否有任何具有特定类的元素进入视图,并修改它们(例如,改变不透明度 - 只有那些进入视野的人).我知道代码可能看起来与此类似,但我无法使其工作:
jQuery(window).on("scroll", function() {
var difference = jQuery(window).offset().top + jQuery(window).height()/2;
if (difference > jQuery(".makeVisible").offset().top) {
jQuery(this).animate({opacity: 1.0}, 500);
}
});
非常感谢你.注意:存在变量差异,因为我希望元素在到达屏幕中间时变得可见.
我有一个单页网站example.com。有两个部分：页面顶部的介绍和页面底部的联系人。如果我想让某人访问联系部分而不必滚动介绍，我给他们这个链接：example.com/#contact。我在下面谈论这些访问。
浏览器会自动向下滚动到接触部分，但它忽略页面顶部的固定导航，所以接触部分的导航背后滚动，因此顶部接触部分变得不可见。这就是我想使用 JavaScript 通过从滚动位置减去固定导航的高度来纠正的。我们将此函数称为scrollCorrector. 问题是我不确切知道这种自动滚动何时发生，所以scrollCorrector每次都应该调用它。
什么时候应该scrollCorrector调用？由于散列部分而发生自动滚动时。为什么不使用onscroll？因为这样我无法区分自动滚动和用户滚动。为什么不在 eachonclick上使用<a href="example.com/#contact">？我会使用它，但是如果用户通过浏览器的后退按钮导航怎么办？好的，我也会用onpopstate。但是，如果用户来自example.com/#intro通过手动将 URL 重写为example.com/#contact怎么办？好的，我也会用onhashchange。但是如果用户已经在example.com/#contact 上，点击地址栏，然后按回车键而不做任何修改怎么办？以上都没有帮助。
那我应该听什么事件？如果这样的事件不存在，怎么scrollCorrector知道自动滚动刚刚发生？
我创建了一个网站并为我的代码添加了一个计数器.
$(function() {
function count($this){
var current = parseInt($this.html(), 10);
$this.html(++current);
if(current !== $this.data('count')){
setTimeout(function(){count($this)}, 50);
}
}
$(".c-section4").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="section4">
<div class="section4-bg"></div>
<div class="counter-section">
<span class="c-section4">152 </span>
<h3> ??????? ?? </h3>
</div>
<div class="counter-section">
<span class="c-section4">152 </span>
<h3> ??????? ?? </h3>
</div>
<div class="counter-section">
<span class="c-section4">152 </span>
<h3> ??????? ?? </h3>
</div>
</div>现在我有一个问题,我想在我滚动到这个元素时反击开始
对不起,我的英语不好
任何人都可以推荐一种"最佳"方法,在向下滚动页面时将滚动条捕捉到元素的顶部？
例如,如果我的布局如下:
<div id="section-one" style="width: 100%; height: 600px;">
Section One
</div>
<div id="section-two" style="width: 100%; height: 600px;">
Section Two
</div>
<div id="section-three" style="width: 100%; height: 600px;">
Section Three
</div>
<div id="section-four" style="width: 100%; height: 600px;">
Section Four
</div>
如果用户正在查看第一部分并开始浏览第二部分开始参与浏览器视口,我希望浏览器自动捕捉到下一个div的顶部.
我熟悉.scroll()和.scrollTop,但有点不确定从哪里开始.
我正在使用一个页面网站,我想用它添加一个计数数字,所以我使用javascript.countTo.js.我创建了每个部分来分组相关数据,我将部分计数器 <section id="counters">放在我的投资组合部分下面<section class="justaddheight portfolio">.每次页面加载数字计数,当我滚动时,我总是看到数字停止或结束它正在计数.现在,当我滚动并进入分区计数器 时,我想要数字计数<section id="counters">.另外,我在我的网站上使用了WOW.js和easingJS,如果你把代码与它结合起来是最好的,但如果没有,它也是可以接受的.代码如下:
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--The Viewport-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Character Set-->
<meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->
<!--///////////////////////////////////////////////////////
CSS
///////////////////////////////////////////////////////-->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font-Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Icomoon-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css"> …我有一个div id="content".
如果用户看到,是否可以执行操作id="content"？
我在页面上有一个div,而不是在页面加载时填充它,我想将调用推迟到它在视图中的点.在许多情况下,用户必须向下滚动才能看到它,如果他们从不查看页面的那一部分,我不想花费资源来查询和显示该信息.有没有办法使用jquery来确定元素已进入视图,并在该点触发ajax调用？
我有一个固定的侧边栏,在向下滚动时可以在页面上看到.
问题是 - 在某些情况下 - 边栏在到达页面底部时越过页脚.
当页脚在屏幕上可见时我想隐藏侧边栏以避免这种情况.我该怎么做？
jquery ×9
html ×5
javascript ×5
css ×3
scroll ×3
anchor ×1
css3 ×1
dom-events ×1
events ×1
hashchange ×1
scrolltop ×1