0

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1View 1 & View 2 View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.

Improve this question
5
  • 1
    Are you looking for position: sticky perhaps? Some reading: CSS-Tricks article, Elad Shechter. Commented Apr 28, 2020 at 21:44
  • I have tried with sticky, no success thou. Thanks, I'll read it Commented Apr 28, 2020 at 21:47
  • I don't understand how position:fixed didn't solve your problem, Can you provide a working code snippet with what you have tried. Commented Apr 28, 2020 at 21:48
  • some implementation with fixed either disappear the contextual menu or fixed to the whole window, not the section. Commented Apr 28, 2020 at 21:50
  • Add your code here please. Without seeing it, you can use position: sticky on menu, however, you need to add position: relative to the body tag as well as the container your menu is in. Commented Apr 28, 2020 at 22:12

1 Answer 1

Reset to default
1

There were a few things going on:

  1. You can set body { position: relative } in your CSS
  2. position: sticky needs a full height column to work. Because your col-6 that was holding your menu was only as tall as it needed to be, it won't scroll.
  3. I moved the p-sticky class to your column.
  4. sticky also needs a top value to know where the element should stick to once it becomes sticky.
.p-sticky { position: sticky; top: 60px; } 

body { position: relative; } /*some attemps*/ .p-relative { position: relative; } .p-absolute { position: absolute; } .p-sticky { position: sticky; top: 60px; } .p-fixed { position: fixed; } /* Standar CSS*/ .navbar { background-color: blue; width: 100%; } .nav-fixed { top: 0px; z-index: 1; position: fixed; } .content-ex1 { height: 200px; background-color: green; } .content-ex2 { height: 500px; background-color: #aaaaaa; } .menu { height: 50px; background-color: red; }
<div class="navbar"> some navbar things </div> <div class="navbar nav-fixed"> some navbar things </div> <div class="content-ex1"> Some content here</div> <div class="container"> <div class="row"> <div class="col-sm-6 p-sticky"> <div class="menu">menu or something</div> </div> <div class="col-sm-6 content-ex2"> Some content here</div> </div> </div> <div class="content-ex1"> Some content here</div>

Here's the fiddle to play around with (which includes your bootstrap): http://jsfiddle.net/w4mz9dte/

Note: you appear to be using an old version of BootStrap. You may want to update to the newest version. In that case, only a few things will change - namely, you move the p-sticky class to the menu.

Here's the newest version of BS 4.4: http://jsfiddle.net/kamr0bjw/

body { position: relative; } /*some attemps*/ .p-relative{ position:relative; } .p-absolute{ position:absolute; } .p-sticky{ position:sticky; top: 60px; } .p-fixed{ position:fixed; } /* Standar CSS*/ .navbar{ background-color: blue; width:100%; } .nav-fixed{ top: 0px; z-index:1; position:fixed; } .content-ex1{ height:200px; background-color: green; } .content-ex2{ height:500px; background-color: #aaaaaa; } .menu{ height:50px; background-color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script> <div class="navbar"> some navbar things </div> <div class="navbar nav-fixed"> some navbar things </div> <div class="content-ex1"> Some content here</div> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="menu p-sticky">menu or something</div> </div> <div class="col-sm-6 content-ex2"> Some content here</div> </div> </div> <div class="content-ex1"> Some content here</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You, sir, are the best! thank you very much! This solved it. Now I can see that col-6 whas the "problem".

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.