徽标过渡到菜单不能接受绝对定位(JS)

马泰·潘基奥斯(Matei Panchios)

当我从网站的第一部分滚动徽标时,徽标应保持固定并失去其大小,直到到达菜单为止。然后它应该粘在菜单的左侧。除了不适合的事实以外,其他所有功能都非常有效。我尝试对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像素),并且我也对该部分也感到困惑(它也将填充保留在菜单中)。在这方面的任何帮助都值得赞赏,但是主要问题是:

如何在我提供链接的菜单中放入徽标?

斯坦利1943

好吧,我使用绝对位置。如果要在左侧添加更多空间,只需将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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章