jquery - 位置：固定不与猫头鹰旋转木马一起使用

Question

有问题的页面在这里

我想要做的是修复每个列（div）的日期/日期标题，当它们滚动到视图之外（使它们变得粘滞），这样人们就知道他们在看哪一天。而不是摆弄“标题”本身，我只是设置了一个具有固定位置（当前可见，红色）的第二个隐藏跨度，当你向下滚动一点时我将显示它。

它们似乎正确加载固定以进行闪光，然后在轮播功能加载后采取绝对 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%。所以猫头鹰狂欢无法正确隐藏即将到来的幻灯片。为了解决这个问题，我们需要找到它的包装 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>