Question

我有一个div临时固定，然后用户向下滚动页面。此div将width设置为100%，以便它完全填充其父级，以便它具有响应性。

当div固定时，它的宽度从其父级宽度的100％变为视口宽度的100％。

如何修复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像素值的大小：
Laravel docs:

JavaScript的：

$(function () {

    var div = $('#MrFixed');

    adjustSize(div);

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

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

HTML：

<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;
}

div固定时保持尺寸

2 个答案: