固定 div 時保持尺寸

Question

我有一個div ，它將在用戶向下滾動頁面時暫時固定。 這個 div 的width設置為100%這樣它就完全填滿了它的父級，並且它是響應式的。

當div固定時，它的寬度從其父寬度的 100% 更改為視口寬度的 100%。

當 div 變得固定時，如何保持 div 的寬度？ 注意我不能只是將其寬度設置為像素值，因為屏幕/視口/瀏覽器窗口可能會調整大小。

 $(document).ready(function () { var CONTAINER = $("#container"); var FIXED_SLIDE = $('.fixed-slide').first(); var CONTAINER_TOP = CONTAINER.offset().top; var CONTAINER_HEIGHT = CONTAINER.height(); var FIXED_HEIGHT = FIXED_SLIDE.height(); var MAX_Y_POS = CONTAINER_TOP + CONTAINER_HEIGHT - FIXED_HEIGHT; $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop < CONTAINER.offset().top) { FIXED_SLIDE.css('position', 'relative'); } else if (scrollTop > MAX_Y_POS) { FIXED_SLIDE.css('position', 'relative'); } else FIXED_SLIDE.css('position', 'fixed').css('top', '0px'); }); });

 #container { position: relative; width: 250px; height: 1500px; background-color: #ddd; } .fixed-slide { position: relative; width: 100%; height: 500px; background-color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> </div> <!-- We only have control over changing this div and its children. All other elements on the page we cannot edit or change --> <div id="container"> <div class="fixed-slide"> <p>When I touch the top of the viewport I am fixed. How can I maintain my dimensions when fixed?</p> </div> </div> <!-- Lots of Static main page content here. If I were to make .fixed-slide fixed this content would now popup and appear underneath the header content - naughty - not to mention that .fixed-slides dimensions will change. Thus the need for margin-top instead --> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p> </div>

    $(document).ready(function () {

        var CONTAINER = $("#container");
        var FIXED_SLIDE = $('.fixed-slide').first();

        var CONTAINER_TOP = CONTAINER.offset().top;
        var CONTAINER_HEIGHT = CONTAINER.height();
        var FIXED_HEIGHT = FIXED_SLIDE.height();
        var MAX_Y_POS = CONTAINER_TOP + CONTAINER_HEIGHT - FIXED_HEIGHT;

        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();

            if (scrollTop < CONTAINER.offset().top) {
                FIXED_SLIDE.css('position', 'relative');
            }
            else if (scrollTop > MAX_Y_POS) {
                FIXED_SLIDE.css('position', 'relative');
            }
            else FIXED_SLIDE.css('position', 'fixed').css('top', '0px');

        });
    });

Answer 1

任何時候你都可以通過以下方法獲得窗口的實際大小：.clientWidth, .clientHeight

Answer 2

如果您更新窗口調整大小，您可以將其設置為像素值，這是您可以偵聽的事件。

這是一個 JS Fiddle，演示了根據窗口變化調整 div 像素值的大小：
https://jsfiddle.net/7j6w9ghe/

JavaScript：

$(function () {

    var div = $('#MrFixed');

    adjustSize(div);

    $(window).resize(function () {
        adjustSize(div); 
    });

    function adjustSize(div) {
        div.width(div.parent().width());
    }
});

網址：

<section>
    <article>
    <div id="MrFixed">
        <p>I'm fixed. Resize page I will too.</p>
    </div>
    </article>
</section>

css：

section {
    width:100%

}

article {
    border:1px solid black;
    height:3000px;
    width:75%;
}

div {
    background-color:red;
    height:200px;
    width:100%;
    position:fixed;
}

div p {
    color:white;
}