其他可滚动的一个div固定

时间：2016-11-13 11:40:14

标签： html css twitter-bootstrap

这可能是问题的重复，但在一个方面有所不同。

enter image description here

这是我的页面的基本结构以及它的外观，我想要实现的是使div的左侧部分固定，而右侧部分可滚动，一旦产品相关的东西超过它们的两个滚动显示页脚。

我试图模仿这里的基本结构Flipkart。

我尝试了什么：

static void Main(string[] args)
        {
            List<string> vals = new List<string>();
            vals.Add("a1");
            vals.Add("a11");
            vals.Add("a41");
            vals.Add("a13");
            vals.Add("a12");
            vals.Add("a9");
            var result = vals.OrderByDescending(x => orderNumbers(x));
        }
        public static string orderNumbers(string input)
        {
            return Regex.Replace(input, "[0-9]+", match => match.Value.PadLeft(10, '0'));
        }

对我来说这不是很好，我会采取什么方法来解决这个问题？

3 个答案:

答案 0 :(得分：1)

你不能使用纯css来使这个工作，你需要Jquery，这里是解决方案，首先我们使用jquery计算产品div高度，然后我们在followto（）中添加结果。 我们可以使用Jquery获取元素的高度，如下所示：

.height() - 返回元素的高度，不包括填充，边框和边距。

.innerHeight() - 返回元素的高度，包括填充，但不包括边框和边距。

.outerHeight() - 返回div的高度，包括边框，但不包括边距。

.outerHeight(true) - 返回div的高度，包括margin。

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);
    
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#z').followTo($('#pro').height());
#z {
    background:blue;
    padding:20px;
    width:30%;
    position:fixed; top:0px; left:0;
    float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col-md-4" id="z">
    xx
    xx
    x
    x
    x
    x
    x
    x
    x
    x
    x
  </div>
  <div id="pro" class="col-md-8 flot" style="margin:30%;">
    <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
  </div>
  </div>
</div>
<footer>This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
</footer>

答案 1 :(得分：1)

看一下 Codepen 。

或者查看下面的代码段：

var div_top = $('.cta').offset().top - 95;

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var more_content_top = $('.more-content').offset().top - 360;
    if (window_top >= div_top && window_top <= more_content_top) {
        $('.cta').removeClass('stick-bottom');
        $('.cta').addClass('stick');
    } else if (window_top >= more_content_top) {
        $('.cta').removeClass('stick');
        $('.cta').addClass('stick-bottom');
    } else {
        $('.cta').removeClass('stick');
        $('.cta').removeClass('stick-bottom');
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
body {
  margin: 80px 0 0 0;
}

.header {
  padding: 20px 30px;
  text-align: center;
  background: #2E78EC;
  color: #fff;
  font-size: 28px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.footer {
  padding: 20px 30px;
  text-align: center;
  background: #444;
  color: #fff;
  font-size: 28px;
}

.content {
  display: flex;
  min-height: calc(100vh - 160px);
}

.content > div {
  flex: 1;
  text-align: center;
  padding: 20px;
}

.left {
  position: relative;
  padding-top: 60px !important;
}

.img {
  width: 100%;
  height: 200px;
  background: #ddd;
  margin-bottom: 20px;
}

.cta-btn {
  display: block;
  background: #FD9E28;
  width: calc(100% - 40px);
  color: #fff;
  padding: 10px 20px;
}

.cta.stick {
  position: fixed;
  top: 100px;
  left: 20px;
  width: calc(50% - 40px);
}

.cta.stick-bottom {
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
}

.more-content {
  padding: 20px;
}
<div class="header">Header</div>
<div class="content">
  <div class="left">
    <div class="cta">
      <div class="img"></div>
      <a class="cta-btn">
      Add to Cart
      </a>
    </div>
  </div>
  <div class="right">
    <h4>Product Description</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
    <br><br><br>
    <h4>Product Specifications</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
  </div>
</div>
<div class="more-content">
  <h4>More Content</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
</div>
<div class="footer">Footer</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望这有帮助！

答案 2 :(得分：0)

<div class="container">
  <div class="row">
  <div class="col-md-4" style="position:relative;top:100px;left:20px;">
    xx
    xx
    x
    x
    x
    x
    x
    x
    x
    x
    x
  </div>
  <div class="col-md-8" style="margin:30%;overflow:scroll;top:100px;position:relative;">
    <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
  </div>
  </div>
</div>

在您发送的网站中，左右不固定，是相对的，只需将两列相同的位置类型添加滚动到右侧

也是左侧固定位置的小提琴 https://jsfiddle.net/3j7yrsLx/

相关问题
最新问题