Sticky Top Div with Absolute Positioning

Issue with positioning and sticky scroll of absolute div

So, it's hard to tell exactly what you're asking for but I think I'm close to what you're asking for. Essentially if you want a floating side div you need to treat it as completely separate from the other div. Really as far as the css and html goes the .floatingfxbuy div is separate from the entire page.
If you want the floating div to be absolute positioned until you scroll to a certain height you need to use JavaScript to change the position to fixed for the div when the window scrolls to a certain point.
You also need to have the z-index slightly higher on the floating div so that it doesn't interact with any elements "underneath" it.
Here is a quick example I threw together. Sorry about the terrible colors.

$(document).ready(function() { // at document ready run this function  var $window = $(window); // local variable to window  $window.on('scroll resize', function() { // on window scroll or resize run this function    if ($window.scrollTop() > 50) { // if the top of the window is lower than 50px then add the fix class to the .floating-side-div      $('.floating-side-div').addClass('fix');    } else { // if the top of the window is heigher than 100px remove the fix class      $('.floating-side-div').removeClass('fix');    }  });});

body {  margin: 0;  /* get rid of some default body styles */}
.page-container {  min-height: 200vh;  /* set height of page so we can scroll to test */  width: 100%;  background-color: green;}
.content-div {  width: 60vw;  /* width you suggested */  height: 50vh;  /* random height for content */  margin-left: 10vw;  /* some left margin you want */  background-color: red;}
.floating-side-div {  height: 10vh;  /* 10% viewport height like you want */  width: 20vw;  /* width you have in your css */  background-color: blue;  position: absolute;  /* to start we want absolute position */  right: 0;  /* put it at the right of the page */  top: 0;  /* put it all the way at the top. you can change this if you want */  z-index: 99;  /* increase z-index so we're over top of the other elements on the page and don't distort the page when scrolling */}
.floating-side-div.fix {  position: fixed;  /* change from absolute to fix so we 'fix' the div to a spot in the viewport. in this example top: 0, right: 0; */}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">  <!-- our page container -->  <div class="content-div"></div>  <!-- the content div(your .mainbodyfx) -->  <div class="floating-side-div"></div>  <!-- the floating div(your .floatingfxbuy) --></div>

How can I make an absolute element sticky using CSS?

You can do this with position: fixed, not with position: absolute.

body {
  height:2000px;
}

.sidebar {
  background:blue;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:60px;
}

<body>
  <div class="sidebar">
  </div>
</body>

Navigation bar : position Absolute and Sticky

You can simplify your code and avoid using an extra container:

body {  background-color: grey;  margin: 0;}
nav {  position: sticky;  top: 0;  width: 300px;  height: 70px;  margin:45px auto -115px; /* 115 = height + margin-top */  background-color: red;}
header {  height: 50vh;  background-color: blue;}
main {  height: 200vh;  background-color: green;}

<nav></nav><header></header><main></main>

Have sticky navbar positioned after absolutely positioned div

My suggestion would be to add a margin-top to the #navbar of 100vh (vh = viewport height). This will allow you to factor in the absolutely positioned elements that are out of the flow of the doc.

Also be sure that #top-news has a top: 0 to ensure it stays at top of doc.

Hope that helps.

Sticky Top Div with Absolute Positioning

Issue with positioning and sticky scroll of absolute div

How can I make an absolute element sticky using CSS?

Navigation bar : position Absolute and Sticky

Have sticky navbar positioned after absolutely positioned div

Related Topics

Leave a reply