我在页面上有一个图像，当页面加载时，它的绝对位置位于页面的中心位置。当用户向下滚动页面并且图像从屏幕的顶部到达20％的位置时，我想要将该图像的位置改变为固定的，使得它始终停留在距离屏幕顶部20％的屏幕上。元素到达某个点时更改CSS属性

我想我将不得不做这样的事情：

$(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"); 
     } 
    }); 
});

英语不是我的第一语言，所以我画了什么，我想如果做我的解释并不清楚：

的什么我正在寻找 enter image description here

EDIT 2（ANSWER）图片：赢得了＃1 “别让我回答我的问题，因为我没有足够的声誉所以这里是我想出了工作代码：

$(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%"}); 
    } 
});

来源

2014-06-12 user257735

你正在做的是制作一个可停靠的菜单。你可以添加/删除一个CSS类，当用户滚动一个点，并在CSS类定义你需要它的规则。 – Huangism

我用你的代码组成了一个[小提琴]（http://jsfiddle.net/brandonhorst/S7Kvr/），你能解释它与目前的不同么？ –

当它位于窗口顶部20％时，元素需要被切换到固定位置。我尝试了我在原始帖子中发布的代码，但它不起作用。 – user257735

检查这个小提琴。

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; 
}

来源

2014-06-12 19:00:49

或者，你可以看看jquery-waypoints插件。使用方法如下：

$('#your-div').waypoint(function() { 
    console.log('25% from the top'); 
    // logic when you are 25% from the top... 
}, { offset: '25%' });

来源

2014-06-12 19:35:35

元素到达某个点时更改CSS属性

回答

检查这个小提琴。

相关问题