的顶部我有一个是从浏览器窗口的顶部定位在100px的一个div
。当用户向下滚动时,我想让div
保持在的位置,直到它到达屏幕的顶部。然后,我将使用JQuery更改一些CSS,以便将位置更改为固定值,并将margin-top设置为0.如果此div
位于屏幕的顶部,我如何在JQuery中进行测试?测试在JQuery的元素是否在屏幕
28
A
回答
49
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
// Your div has reached the top
}
});
P.S.为了获得更好的性能,您应该可以调节滚动事件处理程序。
查看John Resig的文章:Learning from Twitter。
2
没有太多的答案,但可能有助于其他人。使用上面接受的答案,并参考“从Twitter学习”链接(谢谢@Joseph Sibler),我提出了以下内容。
我使用的是Twitter Bootstrap Navbar我的主导航。它的ID为megamenu
。
我也有我的页面上的“登录”按钮,单击时,滑动导航栏和下方下来的所有内容以显示登录表单。所以呢?那么,现在我的导航栏的位置已经改变了,如果我没有更新那个位置,当我滚动导航栏时,它将飞到浏览器的顶部 - 尽管它并不是真正的顶部。
我想出了这个更新导航栏位置,如果用户点击“登录”,然后滚动,导航栏将正确自身固定在顶部。
logincollapse
是我的容器div,它保存登录表单和其他隐藏内容,直到点击了login
按钮。
我敢肯定有改进的余地 - 所以请大家指正,我会相应地更新。
jQuery的
var did_scroll = false,
$window = $(window),
megamenu_distance = $('#megamenu').offset().top; // The default position of the navbar
$('#logincollapse').slideToggle(300, 'easeInOutQuint', function() {
megamenu_distance = $('#megamenu').position().top; // Updated position of the navbar
....
});
$window.scroll(function (event) {
did_scroll = true;
});
setInterval(function() {
if (did_scroll)
{
did_scroll = false;
if ($window.scrollTop() >= megamenu_distance)
{
$('#megamenu').addClass('navbar-fixed-top');
}
else
{
$('#megamenu').removeClass('navbar-fixed-top');
}
}
}, 250);
0
当你有头
。然后放在一边吧。用于固定一边吧,当它在屏幕的顶部:
的Javascript:
var scroll_happened = false;
var aside_from_top = $('aside').offset().top;
$window = $(window);
$window.scroll(function()
{
scroll_happened = true;
});
setInterval(function()
{
if(scroll_happened == true)
{
scroll_happened = false;
if($window.scrollTop() >= aside_from_top)
{
$('#aside_container').addClass('fixed_aside');
}
else
{
$('#aside_container').removeClass('fixed_aside');
}
}
} , 250);
的CSS:
.fixed_aside
{
position: fixed;
top: 0;
bottom: 0;
}
HTML:
<aside>
<div id="aside_container">
<section>
</section>
<section>
</section>
<section>
</section>
</div>
</aside>
0
嘿,你可以这样做这个:
var distance = $('.yourclass').offset().top;
$(window).scroll(function() {
if ($(this).scrollTop() >= distance) {
console.log('is in top');
} else {
console.log('is not in top');
}
});
-1
$(document).ready(function(){
var $doc = $(document);
var position = 0;
var top = $doc.scrollTop(); // 현재 스크롤바 위치
var screenSize = 0; // 화면크기
var halfScreenSize = 0; // 화면의 반
/* 사용자 설정 값 시작 */
var pageWidth = 1000; // 페이지 폭, 단위:px
var leftOffet = 409; // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px
var leftMargin = 909; // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다.
var speed = 1500; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)
var easing = 'swing'; // 따라다니는 방법 기본 두가지 linear, swing
var $layer = $('#quick'); // 레이어 셀렉팅
var layerTopOffset = 140; // 레이어 높이 상한선, 단위:px
$layer.css('z-index', 10); // 레이어 z-인덱스
/* 사용자 설정 값 끝 */
// 좌우 값을 설정하기 위한 함수
function resetXPosition()
{
$screenSize = $('#contact').width(); // 화면크기
halfScreenSize = $screenSize/2; // 화면의 반
xPosition = halfScreenSize + leftOffet;
if ($screenSize < pageWidth)
xPosition = leftMargin;
$layer.css('left', xPosition);
}
// 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
if (top > 0)
$doc.scrollTop(layerTopOffset+top);
else
$doc.scrollTop(0);
// 최초 레이어가 있을 자리 세팅
$layer.css('top',layerTopOffset);
resetXPosition();
// 윈도우 크기 변경 이벤트가 발생하면
$(window).resize(resetXPosition);
// 스크롤이벤트가 발생하면
$(window).scroll(function(){
yPosition = $doc.scrollTop() + layerTopOffset;
$layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
});
});
+0
你可以解释你添加或改变了什么? – lalithkumar
相关问题
- 1. jQuery的:测试是否元素在屏幕上
- 2. 测试元素是否存在jquery
- 3. 确定元素是否在屏幕上
- 4. 测试是否元素存在
- 5. jQuery:测试元素是否为MATCHED元素的第一个
- 6. 测试是否存在输入类型文本的元素jquery
- 7. 当元素在屏幕上可见时测试
- 8. 测试是否屏幕是开/关在iphone
- 9. 检测对象是否在屏幕上
- 10. 如何使用jQuery测试元素是否驻留在iFrame中?
- 11. 如何使用jQuery测试iframe中是否存在HTML元素?
- 12. 确定iframe中的元素是否在屏幕上可见
- 13. 我如何知道元素是否在屏幕的低20%?
- 14. 如何检测元素是否不显示在屏幕上进行滚动?
- 15. libgdx:使用相机测试对象是否在屏幕外
- 16. 的jQuery:输入变量测试是否是DOM元素
- 17. 屏幕阅读器是否可以在DIV元素中“锁定”?
- 18. 检查元素是否在屏幕上与断言,NoSuchElementException发生
- 19. 如何知道html元素是否在屏幕上?
- 20. 如何知道元素是否在屏幕上?
- 21. 如何检查元素是否在屏幕上
- 22. 如何测试是否在numpy的数组每一个元素都被屏蔽
- 23. PowerShell的:测试在网页是否存在一个元素
- 24. 测试对象是否为DOM元素
- 25. 测试div是否没有元素
- 26. 测试元素是否为数组c
- 27. 测试某些元素是否可见
- 28. 尝试将元素保留在屏幕中央但包含在父元素中
- 29. 在jQuery中,如何测试一个元素是否是同一类的多个元素中的第一个?
- 30. 是否可以预测Android中不同屏幕中UI元素的新位置?
我可以把一个像素#进行距离是多少? –
@Hubrid - 好的。请确保不要包含字母'px',因为您希望它是一个数字。 –