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（）＆gt; = 200）{ $（ “标识路径 ”）的CSS（{“ 顶 ”：“ - 10px的”， “左”： “ - 10px的”}）;
} 我想这个条件是不必要的，因为只有当窗口滚动高于1000时才会达到这个条件。

我认为你应该给位置：绝对的标志路径然后正确设置顶部和左侧。
其中一位家长应该有位置：亲戚，所以徽标会上下左右。

滚动时改变元素的位置

1 个答案: