滚动时更改元素的位置

Question

当我的网站首次加载时，我应该需要一个封面。我将封面分成两部分。当页面向下滚动时，顶部的徽标应移动到左上角并同时变小。封面上的标志下的菜单项应该向上滑动并在页面上占据其位置。所以当滚动完成时，菜单栏会粘在上面。这基本上是我想要的。

为了实现这一点，我尝试通过 jquery 管理滚动。我修复了封面页的滚动量，以等待徽标和菜单项的动作完成。首先我修复页面直到“scrollTop”达到“1000”。在此滚动时间中，我需要在封面上移动对象。

这里是 HTML 代码

<div class="container-fluid position-fixed">
    <div class="container">
        <div class="presantation">
            <div id="show-top">
                <div class="row">
                    <div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8 col-xs-12">
                        <div id="logo">
                            <img src="img/logo.png" class="logo-path img-responsive" name="start"/>
                        </div>              
                    </div>
                    <div class="col-lg-offset-2 col-lg-8">
                        <div id="menu-list" name="description">
                            <ul class="menu-path">
                                <li>About Us</li>
                                <li>Services</li>
                                <li>portfolio</li>
                                <li>blog</li>
                                <li>contact</li>
                            </ul>

                        </div>              
                    </div>

                </div>
            </div>
            <div id="show-bottom">
                <p>You´ve scrolled 0 pixels.</p>
            </div>
        </div>
    </div>
</div>

这是我的 jquery，用于将页面保持在窗口上，直到 scrolltop 值达到 1000

  $(window).on('scroll', function () { 
    //You've scrolled this much:
       $('p').text("You've scrolled " + $ (window).scrollTop() + " pixels");

       if ($(window).scrollTop() >= 1000) {
            $(".container-fluid").removeClass("position-fixed");
            if ($(window).scrollTop() >= 200) {
            $(".logo-path").css({"top":"-10px","left":"-10px"});                
            }
          }
        else {
            $(".container-fluid").addClass("position-fixed");
          } 
            });

我尝试通过 jquery 在 css 中添加“top , left”值，但没有成功。

非常感谢任何帮助

Answer 1

对不起，我无法添加评论，所以我在这里回复。

1。 if ($(window).scrollTop() >= 200) { $(".logo-path").css({"top":"-10px","left":"-10px"});
} 我猜这个条件不是必需的，因为只有当窗口滚动超过 1000 时才会达到。

1. 我认为您应该为徽标路径提供位置：绝对值，然后正确设置顶部和左侧。

2. 其中一个 Parent 应该有 position :relative 所以徽标会位于顶部和左侧。