绝对图像子解决方案

Question

如下图所示，侧边栏位于其包装下方。如果固定背景图像位于包装器下方，如何停止滚动？我不希望它触及页脚。

以下是我的代码：

 <script>
    $(function () {

        //Sidebar navigation

        var scrollNavTop = $('.scroll').offset().top;


        $(window).scroll(function () {
            if ($(window).scrollTop() > scrollNavTop) {
            $('.scroll').css({ position: 'fixed', top: '0px' });
            } else {

                    $('.scroll').css({ position: 'relative', top: '0px' });

            }

        });

    });
</script>

HTML代码：

<div class="wrapper">

<%--      SMOOTH SCROLL--%>
          <div class="scroll">
              <div style="margin:0 auto;">
          <div style="background-image:url(image/scrolltopNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div>
                  </div>
              <div class="subpage-header">
                  <div class="nav-section1"><a class="link" href="#section1"><p style="padding-left:50px;">COMPANY<br />BACKGROUND</p></a></div>
                  <div class="nav-section2"><a class="link" href="#section2"><p style="padding-left:50px;">COMPANY<br />VALUES</p></a></div>
                  <div class="nav-section3"><a class="link" href="#section3"><p style="padding-left:50px;">OUR<br />SERVICES</p></a></div>
              </div>
              <div style="margin:0 auto;">
              <div style="background-image:url(image/scrollbottomNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div>
              </div>
          </div>

Answer 1

绝对图像子解决方案

以下是我将如何解决这个问题：
首先将背景图像更改为您希望滚动的内容中的正常图像然后相对定位其父级，绝对位置为横幅（图像）现在我们可以通过影响它的顶级属性来控制它的滚动 javascript代码检查横幅是否在其父容器内，并且当滚动超出该容器时不再添加滚动。

＆＃13;

body {
  margin-left: 100px;
}
.content {
  position: relative;
  padding-left: 50px;
  height: 1000px;
  background-color: #999;
  margin-bottom: 15px;
}
.end {
  height: 100px;
  background-color: black;
}
.image {
  position: absolute;
  top: 0;
  left: -30px;
  width: 600px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,</p>
  <svg class="image" viewBox="0 0 100 100">
    <path fill="blue" d="m0,10 5,-5
             v80
             l-10,-10" />
    <path fill="#07c" d="m0,10 35,5 
                                        c5,0 5,10 5,10
                                        v40
                                        c0,10 -5,10 -5,10
                                        l-35,5Z" />

  </svg>
</div>
<footer class="end">

</footer>

＆＃13;

class ThreadForm(FormView):
    template_name = 'thread.html'
    form_class = ThreadModelForm
    success_url = '/success'

    def form_valid(self, form):
        # This method is called when valid form data has been POSTed.
        # It should return an HttpResponse.
        return super(ThreadForm, self).form_valid(form)

class MessageForm(FormView):
    template_name = 'thread.html'
    form_class = MessageModelForm
    success_url = '/success'

    def form_valid(self, form):
        # This method is called when valid form data has been POSTed.
        # It should return an HttpResponse.
        return super(MessageForm, self).form_valid(form)

＆＃13;

Answer 2

您必须插入内容＆amp;您的侧边栏导航到容器中并将内容的位置设置为相对位置。您可以使用stickem插件来帮助滚动。一个例子如下：

HTML -

<div class="container">
<div class="row stickem-container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="aside stickem">
      I'm gonna be sticky!
    </div>
</div>

CSS -

.stickem-container {
 position: relative;
}

.stickit {
margin-left: 660px;
position: fixed;
top: 0;
}

.stickit-end {
bottom: 40px;
position: absolute;
right: 0;
}

Javascript -

    <script src="jquery.js"></script>
<script src="jquery.stickem.js"></script>
<script>
    $(document).ready(function () {
        $('.wrapper').stickem();
    });
</script>

停止固定背景图像滚动到一定高度

2 个答案:

绝对图像子解决方案