Maintain dimensions when div is fixed

Question

I have a div that will become fixed temporarily as then user scrolls down the page. This div has its width set to 100% so that it completely fills up its parent and so that it is responsive.

When the div becomes fixed it's width changes from 100% of its parents width to 100% of the viewport width.

How can I maintain the div's width when it becomes fixed? Note I cant just set its width to a pixel value because the screen/viewport/browser window may become resized.

$(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

anytime you can get actual size of window by the methods: .clientWidth, .clientHeight

Answer 2

You can set it to a pixel value if you update on window resize, which is an event you can listen for.

Here is a JS Fiddle demonstrating resizing the div pixel value based on the window changing:
https://jsfiddle.net/7j6w9ghe/

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