Making the Second Banner on the Side Sticky

  • Halil ESEN

    (@halilesen)


    4 years ago

    Hi Ben,

    #sol {
  position: absolute;
  top: 74px;
  z-index: 9;
  right: calc(50% + 464px);
}
    <div id="sol" >1. Ad<br/>
<br/>2. Ad</div>

    I want the second of the two banners that I have fixed on the side with these codes to be sticky. But I do not know exactly which codes to use. Is there any code that can be handled with css? I’m looking for code that works best and simply.

    Maybe it shouldn’t be intertwined. It also needs to be positioned.
    Can you help me?

    You helped me find those codes over here.

    • This topic was modified 4 years ago by Halil ESEN.
    • This topic was modified 4 years ago by Halil ESEN.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Halil ESEN

    (@halilesen)

    If I need to explain what he wants in more detail …
    According to this code, there are two advertisements on the side. One of them will go up normally while scrolling down, while the other will stay fixed on the screen. So it’s like the sticky edges we know.

    Theme Author Ben Sibley

    (@bensibley)

    If you change the position value to “fixed” the ad will stay in the same place on screen:

    #sol {
  position: fixed;
}

    If the ad displays near the top of the site already, that CSS should work great on its own.

    Thread Starter Halil ESEN

    (@halilesen)

    No. It doesn’t happen. What I mean is this: on top of each other 2 ads. One will be “absolute”, the other (the second) will be sticky.

    Theme Author Ben Sibley

    (@bensibley)

    In that case, you can just apply the “fixed” positioning to one ad and not the other. The ads will just need classes so you can target them individually. Something like this would work for the HTML:

    <div id="sol" >
  <div class="ad-1">Ad #1</div>
  <div class="ad-2">Ad #2</div>
</div>

    Then you can use this CSS:

    .ad-1 {
  position: fixed;
}

    The only trouble is that it may not have the “sticky” effect you want. The ad will stay fixed on the screen, but it won’t have the effect where it scrolls normally to the top of the window and then stays fixed on the screen. Adding that functionality will require implementing a Javascript library like this: https://github.com/garand/sticky

    Thread Starter Halil ESEN

    (@halilesen)

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Making the Second Banner on the Side Sticky’ is closed to new replies.