Develop Reference

position sticky using javascript makes div goes outside the parent

I have a menu on the left that I want to be always sticky, I'm using javascript for that for IE11 support.
The problem I'm having is that the right div goes to the left when it's sticky and doesn't keep it's position, the second issue is that the .content div width grows when the right div is sticky.
For the javascript part, I don't know how to make the right div to stop when it reaches the footer.
EDIT:
I managed to solve the second issue, the code is updated, I also tried to add a right value for the right div so it sticks in its initial vertical position, but that's not working because it changes when the screen gets resized.
How can I solve this?
Edit 2:
For the javascript issue I found this post which helped me resolve my issue:
Make sticky/fixed element stop at footer
var sticky = document.getElementsByClassName("sticky-element")[0];
var stickyAnchor = sticky.parentNode;
var state = false;
function getAnchorOffset() {
return stickyAnchor.getBoundingClientRect().top;
}
updateSticky = function (e) {
if (!state && (getAnchorOffset() < 0)) {
sticky.classList.add("is-sticky");
sticky.parentElement.classList.add("has-sticky");
state = true;
} else if (state && (getAnchorOffset() >=0 )) {
sticky.classList.remove("is-sticky");
sticky.parentElement.classList.remove("has-sticky");
state = false;
}
}
window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);
updateSticky();
.main-wrapper {
margin: 48px 48px 0 48px;
max-width: 1366px;
}
.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.wrapper.has-sticky .content{
margin-right: calc(199px + 72px);
}
.content {
flex: 0 1 1040px;
width: calc(1040px - 72px);
min-width: 1%;
margin-right: 72px;
height: 1200px;
background-color: #e6e9f0;
}
.nav-menu {
position: static;
flex: 0 1 199px;
width: 199px;
min-width: 199px;
color: white;
height: 300px;
background-color: #04246a;
right: 10%;
}
footer {
background-color: yellow;
height: 300px;
margin-top: 50px;
}
.is-sticky {
top: 0;
position: fixed;
}
<div class="main-wrapper">
<div class="wrapper">
<div class="content">
Main content
</div>
<div class="nav-menu sticky-element">
<nav>
Side content
</nav>
</div>
</div>
<footer>
Footer content
</footer>
</div>

Are you looking for this?
The problem on your code is that whenever you set the position of your right div to fixed it then looks for its relative parent and jumps to the upper left position inside the parent. In your case, the parent div was the .wrapper, that's why it keeps on jumping to the left side and overlaps your main content div.
I added a parent container for the .nav-menu so it will still be in the same position when scrolling. With this, your .nav-menu element won't be using the .wrapper as its main parent. This will create a smooth scroll without noticing any change in position.
Happy coding!
var sticky = document.getElementsByClassName('sticky-element')[0];
var stickyAnchor = sticky.parentNode;
var state = false;
function getAnchorOffset() {
return stickyAnchor.getBoundingClientRect().top;
}
updateSticky = function (e) {
if (!state && getAnchorOffset() < 0) {
sticky.classList.add('is-sticky');
state = true;
} else if (state && getAnchorOffset() >= 0) {
sticky.classList.remove('is-sticky');
state = false;
}
};
window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);
updateSticky();
.main-wrapper {
margin: 48px 48px 0 48px;
max-width: 80%;
}
.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.content {
flex: 0 1 80%;
width: calc(80% - 24px);
min-width: 1%;
margin-right: 24px;
height: 1200px;
background-color: #e6e9f0;
}
.nav-container {
flex-grow: 1;
width: 20%;
min-width: 200px;
position: relative;
display: block;
}
.nav-menu {
color: white;
width: 100%;
min-width: inherit;
height: 300px;
background-color: #04246a;
}
.is-sticky {
top: 0;
position: fixed;
width: calc(20% - 97px);
}
<div class="main-wrapper">
<div class="wrapper">
<div class="content">Main content</div>
<div class="nav-container">
<div class="nav-menu sticky-element">
<nav>Side content</nav>
</div>
</div>
</div>
</div>

var sticky = document.getElementsByClassName("sticky-element")[0];
var stickyAnchor = sticky.parentNode;
var state = false;
function getAnchorOffset() {
return stickyAnchor.getBoundingClientRect().top;
}
updateSticky = function (e) {
if (!state && (getAnchorOffset() < 0)) {
sticky.classList.add("is-sticky");
state = true;
} else if (state && (getAnchorOffset() >=0 )) {
sticky.classList.remove("is-sticky");
state = false;
}
}
window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);
updateSticky();
.main-wrapper {
margin: 48px 48px 0 48px;
max-width: 80%;
}
.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.content {
flex: 0 1 80%;
width: calc(80% - 24px);
min-width: 1%;
margin-right: 24px;
height: 1200px;
background-color: #e6e9f0;
}
.nav-menu {
position: static;
flex: 0 1 20%;
width: 20%;
min-width: 20%;
color: white;
height: 300px;
background-color: #04246a;
}
.is-sticky {
top: 0;
right:5%;
position: fixed;
}
<div class="main-wrapper">
<div class="wrapper">
<div class="content">
Main content
</div>
<div class="nav-menu sticky-element">
<nav>
Side content
</nav>
</div>
</div>
</div>

Scroll function on hover won't work unless resizing screen

I miss 1% to finish my script, I just don't know how to do it :D
When you hover over the target to the left, you can see the image will scroll. But after clicking on a new image it won't. I then have to resize the window to make it work again. How to fix that? Below is my code but for a working example, here's a CodePen
(function($) {
// virables
var layoutContainer = '.container';
var layoutTarget = '#target';
var layoutTargetIMG = '#target img';
var layoutIMG = '.container .gallery .item img';
var layoutIMGFirst = '.container .gallery .item:first-child img';
// Add first image to target
$(layoutIMGFirst).clone().appendTo(layoutTarget);
// Add image to target when click on gallery image
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
// Image scroll on hover
// This won't work after clicking on an image unless resizing the browser
$(window).resize(function() {
// If i remove this it won't work on the start image.
// Any other solution?
setTimeout(function() {
$('#target img').each(function() {
var itemHeight = $('#target').outerHeight();
var imgHeight = $(this).outerHeight();
// Work out what percentage the image is of the item and remove 100% from that
var topHeight = (imgHeight / itemHeight) * 100 - 100;
//Make the animation speed proptional to that ratio
var animationSpeed = (imgHeight / itemHeight) / 1; //change 2 to tweak the speed
$(this).css({
transition: 'all ease ' + animationSpeed + 's'
});
$(this).mouseleave(function() {
$(this).css({
top: '0'
});
})
// The 'top' property of the image needs
// to be set as as a percentage of the parent
$(this).mouseenter(function(e) {
$(this).css({
top: '-' + topHeight + '%',
});
})
});
}, 200);
});
$(document).ready(function() {
setTimeout(function() { // Add delay after resize so function will load
$(window).triggerHandler('resize');
}, 200);
});
})(jQuery);
.container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-left: -40px;
max-width: 1000px;
background: lightblue;
padding: 20px;
.column {
flex: 1;
min-width: 30%;
margin-left: 40px;
.target {
height: 400px;
background: pink;
position: relative;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.cta {
display: flex;
a {
background: lightgreen;
width: 50%;
padding: 16px 8px;
;
text-align: center;
justify-content: center;
text-decoration: none;
&:last-child {
background: orange;
}
}
}
.gallery {
display: flex;
flex-flow: row wrap;
margin-left: -4px;
.item {
flex: 1;
margin-left: 4px;
position: relative;
overflow: hidden;
&::before {
content: '';
padding-top: 80%;
display: block;
}
img {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="column">
<div id="target" class="target"></div>
<div class="cta">
SE DEMO
KØB LAYOUT
</div>
</div>
<div class="column">
<div class="gallery">
<div class="item">
<img src="https://picsum.photos/600/1200" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/500/1600" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/400/2000" alt="">
</div>
</div>
</div>
</div>

Just change this
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
to
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
$(window).triggerHandler('resize'); // added this line
});

jQuery and CSS media query dont match

i have insert a CSS code to an element to show it only on mobile:
#media only screen and (max-width: 780px) { #footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
z-index: 10;
}}
So far works great. then i added this jQuery, to display it in on scroll.
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop()>100)
{
jQuery('#footer').fadeIn();
}
else
{
jQuery('#footer').fadeOut();
}
});
but now, the element is shown on PC as well. what do i need to insert into the JS code in order to tell him no to show it on PC?
thanks.

Apply display: none to your footer by default. Then, wrap the code that checks the scroll position in an if statement that checks the window's width.
jQuery(window).scroll(function() {
if (jQuery(window).width() <= 780) {
if (jQuery(this).scrollTop() > 100)
{
jQuery('#footer').fadeIn();
}
else
{
jQuery('#footer').fadeOut();
}
}
});
body {
background: #eee;
height: 300vh;
}
#footer {
display: none;
background: #dfd;
}
#media only screen and (max-width: 780px) {
#footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
z-index: 10;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">This is my footer.</footer>

How to wrap then unwrap div when resizing?

I've tried if else statements and it should be fairly simple but I cant seem to reverse the wrap after resizing above 650px.
Basically, I'm trying to get the boxes wrapped in a div when window is below 650 width and then unwrapped after resizing above 650px.
How can I do that?
$(window).resize(function() {
if ($(window).width() < 650)
$('.box').wrap("<div class='boxwrap'><div/>")
});
$(window).resize(function() {
if ($(window).width() > 650)
$('.box').unwrap("<div class='boxwrap'><div/>")
});
#cat-area {
width: 100%;
display: inline-block;
text-align: center;
background-color: red;
}
#cat-container {
background-color: yellow;
width: 92.5%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.box {
display: inline-block;
width: 20%;
height: 20%;
max-height: 300px;
max-width: 300px;
min-height: 100px;
min-width: 100px;
padding: 1%;
background-color: #d7d7d7;
}
#media only screen and (max-width: 650px) {
#cat-area {
width: 100%;
display: block;
text-align: center;
background-color: red;
}
#cat-container {
background-color: blue;
width: 92.5%;
display: block;
}
.box {
position: relative;
display: block;
margin: 4px 0px;
}
.boxwrap {
background-color: #d7d7d7;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cat-area">
<div id="cat-container">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
</div>
</div>

I have faced a similar problem to this myself. Here is a simple demonstration of how you can do this:
Note the page width initially
On resize, after a brief timeout (after resizing has stopped), note the new width
Compare the two values to determine whether we should take action or not
Reset our width for comparison to the new width, for the next time we resize
Run the following snippet, expand it to full screen, and adjust the browser size to see it working.
$(function() {
var resizeTimer;
var initialSize = $(window).width();
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var delayedSize = $(window).width();
// if we resize the page but we don't cross the 650 threshold, do nothing
if ((initialSize > 650 && delayedSize > 650) || (initialSize < 650 && delayedSize < 650)) {
return
}
// else if we resize the page and cross the 650 threshold, do something
else {
if (delayedSize > 650) {
$('#cat-container').unwrap('#cat-area');
} else if (delayedSize <= 650) {
$('#cat-container').wrap('<div id="cat-area"></div>');
}
}
initialSize = delayedSize;
}, 250);
});
});
#cat-area {
background-color: gold;
padding: 10px;
}
#cat-container {
background-color: slategray;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cat-area">
<div id="cat-container">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
</div>
</div>

Sticky sidebar | Problems with content height

I am tring to create a sidebar or section that follows you as you scroll down the page.
It works fine but if height of content shorter than leftsidebar, page became not smooth and structure is broken. How to fix it?!
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6 && $('.sidebar').offset() != null) {
var top = $('.sidebar').offset().top - parseFloat($('.sidebar').css('margin-top').replace(/auto/, 0));
var height = $('.sidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 0;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.sidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
}
else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.sidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
}
else {
// otherwise remove it
$('.sidebar').removeClass('leftsidebarfixed').css('top', '0px');
}
});
}
});
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: absolute;
top: 0;
height: 100vh;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: auto;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
}
}
.main {
padding-top: 20px;
height:auto;
}
#media (min-width: 768px) {
.main {
padding-right: 20px;
padding-left: 20px;
}
}
.table{
font-size:x-small;
}
.HeaderStyle th{
text-align:center; /*Заголовки в таблице стоят по центру*/
background-color:#FFDEAD;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#contentHolder{
position:relative;
}
#header,#footer {
background: none repeat scroll 0 0 #CCFFFF;
color: #000000;
height: 150px;
width: 100%;
clear:both;
font-size:3em;
text-align:center;
}
.leftsidebarfixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header">...</div>
<div class="container-fluid max-height no-overflow">
<div class ="row max-height">
<div id="contentHolder">
<form runat="server">
<!--sidebar-->
<div runat="server" class="col-sm-3 sidebar">
</div>
<!--MAIN CONTENT-->
<div class="col-sm-offset-3 main scrollable">
</div>
</form>
</div>
</div>
</div>
<div id="footer">...</div>
</div>
Problem: