Question

当我从网站的第一部分滚动徽标时，应该保持固定并丢失其大小，直到它到达菜单。然后它应该粘在菜单的左侧。一切都很好，除了它不适合的事实。我尝试对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/

我还想在第一部分（350px）中的徽标之前添加一些空格，并且我也在努力处理该部分（它也将填充保留在菜单中）。我们对此领域的任何帮助表示赞赏，但主要问题是：

如何在我提供链接的菜单中放置徽标？

Answer 1

好吧，我使用绝对位置。如果你想在左边增加更多的空间，只需改变左边：0到左边：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');
    }
});

徽标过渡到菜单无法接受绝对定位（JS）

1 个答案: