Stack Overflow
Stack Overflow

Questions tagged [sticky]

In web pages, a sticky element is an element of the page that stays at a fixed position on the screen, making it always visible.

In web pages, a sticky element is an element of the page that stays at a fixed position on the screen, making it always visible.

This is achieved using some CSS positioning attributes, possibly in combination with some javascript for additional features. See also: https://stackoverflow.com/tags/sticky-footer/info

1952 questions
12
votes
2 answers

sticky-kit flashes when sticky

I have some adsense ads displayed on a test page using sticky-kit v1.1.2. When I scroll down the page (I am using Chrome browser), the ads flash/reload when the sticky-kit becomes sticky. I have read this trouble shooting guide that does seems to…
user1261774
  • 3,525
  • 10
  • 55
  • 103
12
votes
3 answers

How do I stick an image to the bottom of the visible screen, and be centered?

I have a website, and I need to have an image centered at the bottom of the visible page. So in any screen size, the image will still be at the bottom, and centered.
Shawn
  • 185
  • 1
  • 2
  • 7
10
votes
1 answer

Bootstrap sticky-top on sidebar column doesn't work

I'm trying to create a sticky sidebar on the right. The sidebar menu is inside a grid column. I'm using the sticky-top class as shown in this question, but it still doesn't work. Here's the code...
…
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
10
votes
1 answer

How to control z-index of a child of a sticky element

I have two container elements which have position: sticky and a z-index: 1. One of those elements has a child node with position: absolute. I would like the child node to be visually on top of both container elements. This is the html structure I…
Sam Houston
  • 3,413
  • 2
  • 30
  • 46
10
votes
1 answer

position sticky automatic "top" position

Is there a way for stickies to take into account other stickes on the page? For example: body { display: flex; min-height: 2000px; flex-direction: column; } #header { height: 40px; flex: 0 0 auto; position: sticky; top: 0; …
Elfy
  • 1,733
  • 6
  • 19
  • 39
10
votes
2 answers

HAproxy 1.5.8 How do I configure Cookie based stickiness?

Our application requires cookie based sticky sessions, so we want to use HAproxy to balance incoming traffic towards a farm of IIS servers. We are using the following config which seems to work on the lab (round-robin working fine and session…
Vanessa Bullock
  • 101
  • 1
  • 1
  • 3
10
votes
1 answer

Sticky Header - buggy jumping on scroll

I have a specific problem on making a sticky header with jQuery. I tried the commonly used snippets around the web, but I perceived the same buggy thing everywhere. At a specific document height (scrollable until a little more than calling of…
Timo Mämecke
  • 287
  • 2
  • 14
10
votes
3 answers

Advanced jQuery sticky sidebar

I'm working on a (sticky) scrolling sidebar. The problem is that most sticky sidebars don't take into consideration that the sidebar can be taller then the viewport (e.g. if many items are added to the basket(sidebar)). Which is what I'm trying to…
Yunowork
  • 345
  • 1
  • 6
  • 15
9
votes
2 answers

jQuery - DIV to move with scrolling motion and stick position to top and bottom of window

There may be already a jQuery plugin which can achieve this, but I can't find one to do exactly what I'm after. If there is, just point me to the tutorial, thanks. My problem I have is that I have very long page content, and my sidebar is not…
Joshc
  • 3,825
  • 16
  • 79
  • 121
9
votes
2 answers

Display element over one with position: sticky

I need to display a dropdown content over an element that has position: sticky set. Unfortunately manipulation with z-index didn't help much. The content shown on hover is still covered by next sticky element. Full example presenting the problem…
gregid
  • 111
  • 2
  • 7
9
votes
1 answer

Why is 'position: sticky' not working with Core UI's Bootstrap CSS

I am trying to build a react dashboard using Core UI's react template found here. CSS .top-stick { position: sticky !important; position: -webkit-sticky; top: 5rem; overflow-y: auto; height: calc(100vh - 5rem); } JSX
Nithin
  • 1,387
  • 4
  • 19
  • 48
9
votes
6 answers

Window scroll event using @HostListener not working

I have problem making sticky header when scrolling down, in an Angular 4 application. Scroll event can't be detected. Header is placed in the layout component, and the content I want to be scrolling is placed in routes component. May that be the…
tolceza
  • 91
  • 1
  • 1
  • 2
9
votes
1 answer

How to left column fixed and right scrollable in Bootstrap 4, responsive?

I'm using Angular 4, Bootstrap 4 and trying to implement a fixed scrollable right div and a fixed left div. It should very similar to what Trulia has. Bootstrap dropped the Affix jQuery plugin in version 4 so this method is not valid anymore, they…
Isak La Fleur
  • 4,428
  • 7
  • 34
  • 50
9
votes
3 answers

Make content sticky on scroll to a point in jQuery

I have a div that's set to position: relative. It becomes fixed when the top of the window reaches it. The div lives in a container (blue in the example below) and I would like to set it back to relative when it reaches the bottom of its parent…
Julesfrog
  • 1,113
  • 3
  • 12
  • 19
9
votes
1 answer

Google pubads appear and then disappear

I'm using Google pubads on http://development-client-server.com/ds/ which is working great, until you get to the actual story page (see http://development-client-server.com/ds/speech-more-common-autism/), when the right top sidebar ad will load and…
Amber Weinberg
  • 95
  • 6
1 2 3
…
99 100