[英]Change CSS property when an element reach a certain point
我在页面上有一个图像,该图像在加载时的绝对位置位于页面的中心。 当用户向下滚动页面并且图像到达屏幕顶部20%的位置时,我想将该图像的位置更改为固定,以便它始终在屏幕上方20%处停留在屏幕上。
我猜我将不得不做这样的事情:
$(function () {
$(window).scroll(function () {
var aheight = $(window).height() / 2;
if ($(this).scrollTop() >= aheight) {
$("#image").css("position", "fixed");
}
else {
$("#image").css("position", "absolute");
}
});
});
这行是我应该放20%的位置,但是我不知道如何:
var aheight = $(window).height() / 2;
编辑代码(仍然无法正常工作,但我忘了在原始帖子中发布var,并且滚动高度设置为50%而不是20%):
var t = $("#logo").offset().top;
$(function () {
$(window).scroll(function () {
var aheight = $(window).height() / 5;
if ($(this).scrollTop() >= aheight) {
$("#logo").css("position", "fixed");
}
else {
$("#logo").css("position", "absolute");
}
});
});
英语不是我的母语,所以我画了我想做的事情,以防我的解释不清楚:
我正在寻找的图像
编辑2(答案):Stackoverflow不会让我回答我的问题,因为我没有足够的声誉,所以这是我自带的工作代码:
$(document).scroll(function(){
var bheight = $(window).height();
var percent = 0.3;
var hpercent = bheight * percent;
if($(this).scrollTop() > hpercent)
{
$('#logo').css({"position":"fixed","top":"20%"});
}else{
$('#logo').css({"position":"absolute","top":"50%"});
}
});
http://jsfiddle.net/livibetter/HV9HM/
使用Javascript:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
CSS:
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
另外,您可以看看jquery-waypoints插件。 使用非常简单:
$('#your-div').waypoint(function() {
console.log('25% from the top');
// logic when you are 25% from the top...
}, { offset: '25%' });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.