Technical documentation page , sticky scrolling trouble

Hi all.
I’ve been stuck on this a while now, and I’ve come a way but it’s not working 100%.

So the navigation bar should be sticky on the left side when the screen is wider, and on top when the screen is narrow.

The left sticky side, sort of works, but isn’t sticky the whole vertical scroll.
And the top sticky works better but when I then click a link the result is buried underneath the navigation part.

Any insights?
Thanks

Ahh, we will need to see your HTML and CSS in order to help you. You can either paste it in here or put it in codepen and then give us the link.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

1 Like

Off course ,

thanks :slight_smile:

So, for narrow screens you have this:

@media (max-width: 600px){
   #main-doc{
     flex-flow: column wrap;
   }
   .left{
      width: 90%;
      top: 0px;
   }
}

You have general class selector for left class:

.left{
  width: 35%;
  height: 150vh;
  top:0px;
  left:0px;
   position: -webkit-sticky;
  position:sticky;
  overflow-y:scroll;
  background-color: hsla(180, 50%, 25%, 1);
}

And here you have left: 0px.
Your media query doesn’t change anything about “I am stick to the left” situation, as I see it.
My assumption: your query should change left property, top property can remain the same.

Also I am not sure if you need px for top and left props. As I remember, it could be just 0.

Also I would ask anyone with more CSS expertise to confirm or correct my observations.

1 Like

I tried both 0 and 0px , made no difference, but thanks.a
Actually narrow screen sticky did work before, but I changed code around so much that now it doesn’t. I will fix this first

That’s basically me in a nutshell :joy:

1 Like

It should be better again, at least the small screen sticky scrolls for me in the freecode camp page, but not correctly , as the sticky part covers part of the text when jumped too.
And the sticky left still doesn’t scroll correctly for a large screen.

thanks!

try in media query left: unset
i mean try it within left class selector of course

position fixed , maybe what’s needed. I’m getting there, ugh.
I feel I’m going so slow , taking forever , starting over, than taking forever again .

I am somewhat new to codepen. If I will fork your pen, I will have basically a copy of it?
I wanna try something about your issue

1 Like

Hey, I wrote some snippet for you.

Take a look how colored div(.stickyone) changes with breakpoint.
It will give you some thoughts I guess.
MAJOR UPDATE. Try to test all the below for cscrolling with position:fixed.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div class ="stickyone">
        <p>Try to check how this breakpoint works</p>
    </div>
    <div class="filler">
        <p>Just to test scrolling</p>
    </div>
  </body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid black /*for the sake of visualization */
}

html, body {
    width: 100%;
    height: 100%;
}

.stickyone {
    position: sticky;
    top: 0;
    left: 0;
    background-color: aquamarine; /* for the sake of test */
    width: 25%; /* on big screen will be left side of vw */
    height: 100vh;

}

.filler {
    font-size: 26px;
    width: 1000px;
    height: 1000px;
}

@media (max-width: 600px){    
    .stickyone{
        left: unset;
        width: 100%;      /*on narrows will be 100% and stick to top only*/
        height: 35vh;
    }
 }
1 Like

Yes, I have that too basically, but it’s still not working.

As soon as I add height to the left navigation part(.left), the large screen scroll works great, but no longer in small screen, in fact the entire right (.right)side is then covered by the left side.

Edit: I’ve solved the height thing I think (i’m working on the code in the freecodecamp page) .
Just talking here helps :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.