Question

page with issue is here

我要做的是修复每个列（div）日期/日期标题，当它们滚出视图时（使它们变粘），以便人们知道它们在哪一天看。我没有摆弄'标题'本身，而是设置了第二个隐藏的跨度，其中固定的pos（当前可见，红色），当你向下滚动时我会显示。

它们似乎正确加载固定闪光灯，然后在轮播功能加载后采取绝对pos行为，但我无法弄清楚原因。

任何人都猜测如何解决这个问题或做不同的事情？唯一的要求是远离表格，这样我们就可以轻松地将其响应到手机上。

我期待任何建议，谢谢！

富

Answer 1

您的问题出在您的展示位置：

将您的范围更改为div并将其移至显示的位置。

并给他们显示的CSS。美化部分由您决定。这可能不是最美观的方式来呈现这一点，但它确实回答了你的问题，以使其得到修复。

  <div class="day-title-fixed">Wed, Mar 12</div><!--Move it here -->
    <div id="schedule-wrap"> ....</div>



#main > div.day-title-fixed {
    position: fixed;
    left: 510px;
    width: 126px;
    background-color: red;
    z-index: 1;
    height: 35px;
}

Answer 2

这里的问题是，一旦div被修复，它的宽度就会自由变为100％。所以owl carousal无法正确隐藏未来的幻灯片。为了解决这个问题，我们需要找到它的包装div的宽度，并给固定的div提供相同的宽度。我们可以通过使用javascript来实现这一点。

    <script type="text/javascript">
        var divAWidth = $('#carousal-wrapper-outer').css('width');
            $('#carousal-wrapper-inner').css('width', divAWidth);    
    </script>


            <div id="carousal-wrapper-outer" style="overflow: hidden;" class="col-sm-6">
                <div id="carousal-wrapper-inner" style="position:fixed;top:30%" >
                    <div id="owl-demo" class="owl-carousel owl-theme">
                          <div class="item"><img class="img-responsive" src="img/dig-tab-img-1.png" alt="" /></div>
                          <div class="item"><img class="img-responsive" src="img/digital-1.png" alt="" /></div>
                          <div class="item"><img class="img-responsive" src="img/digital-2.png" alt="" /></div>
                   </div>
                </div>   
            </div>

位置：固定不使用猫头鹰旋转木马

2 个答案: