我试图创造一种效果,而不是当用户滚动时,我一直h1
停留在窗口顶部。当父div滚动到h1之后,然后“释放”并再次正常滚动。当我的下一个section
进来时,我想再次将其粘贴h1
在顶部附近,依此类推。
jQuery的
$(document).ready(function(){
$(window).scroll(function(){
$('section h1').addClass('fixed');
})
})
我也尝试过:
var section = $('section');
distance = section.offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
section.find('h1').addClass('fixed');
}
});
您可以使用一些jQuery来做到这一点。
以下代码段计算出每个部分到窗口顶部的偏移量。当某个部分到达窗口顶部时,其标题<h1>
位置将更改为position:fixed;
。
jQuery的:
function fixTitle() {
$('section.affix').each(function () {
var $this = $(this);
var offset = $this.offset().top-40;
var scrollTop = $(window).scrollTop();
if (scrollTop > offset) {
$this.addClass('fixed');
} else {
$this.removeClass('fixed');
}
});
}
$(document).ready(function () {
$(window).scroll(fixTitle);
});
CSS:
section {
overflow:hidden;
padding:0 20%;
position:relative;
text-align:justify;
}
section h1 {
float:left;
width:14%;
padding-left:1.5%;
line-height:40px;
background:#fff;
position:relative;
z-index:1;
}
section .summary {
float:right;
width:70%;
}
.fixed h1:first-child {
position:fixed;
top:0;
}
h1:first-child:before{
content:"";
position:absolute;
left:0;
width:5%;
height:100%;
background-color:#4381B6;
z-index:-1;
}
.fixed h1:first-child:before{
width:100%;
-webkit-transition:width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句