当我从网站的第一部分滚动徽标时,徽标应保持固定并失去其大小,直到到达菜单为止。然后它应该粘在菜单的左侧。除了不适合的事实以外,其他所有功能都非常有效。我尝试对JS脚本进行修改,以便添加一个添加了类的类,position: absolute;
但是却破坏了我的导航栏。
实时网站:http://theworkshop.ro/astra3/
这是JS:
<!-- Logo transition to menu JS-->
<script type="text/javascript">
var navbar = $('#nav_bar'),
navbarOffset = navbar.offset().top,
image = $('#image'),
imageOffset = navbar.offset().top;
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
if (scrollTop > navbarOffset) {
navbar.addClass('fixed');
} else {
navbar.removeClass('fixed');
}
if ($(this).scrollTop() > imageOffset) {
image.removeClass('fixed');
} else {
image.addClass('fixed');
}
});
</script>
类似的小提琴示例:http : //jsfiddle.net/peteng/FyEGN/636/
我还想在第一部分的徽标之前添加一些空间(350像素),并且我也对该部分也感到困惑(它也将填充保留在菜单中)。在这方面的任何帮助都值得赞赏,但是主要问题是:
如何在我提供链接的菜单中放入徽标?
好吧,我使用绝对位置。如果要在左侧添加更多空间,只需将left:0更改为left:10px;
我还自由地将原来的图像更改为imageOffset = navbar.offset()。top -100; 因此,更改将在图像到达菜单之前发生。100是图像的高度。
这是工作示例:http : //jsfiddle.net/FyEGN/639/
CSS:
.image {
position:absolute;
z-index:3;
margin:25px auto;
left:0; //this places the image to the left
width:100px;
height:50px;
transition: width 1s, height 1s;
}
.img-fix{
position:fixed;
top:0;
left:50%;
margin-left:-100px;
width:200px;
height:100px;
}
Javascript:
var navbar = $('#navbar'),
navbarOffset = navbar.offset().top,
image = $('.image'),
imageOffset = navbar.offset().top -100;
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
if (scrollTop > navbarOffset) {
navbar.addClass('fixed');
} else {
navbar.removeClass('fixed');
}
if ($(this).scrollTop() > imageOffset) {
image.removeClass('img-fix');
} else {
image.addClass('img-fix');
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句