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
413
votes
37 answers

How does the "position: sticky;" property work?

I want to make the navigation bar stick to the top of the viewport once a user scrolls the page, but it's not working and I have no clue why. If you can please help, here is my HTML and CSS code: .container { min-height: 300vh; } .nav-selections…
Harleyoc1
  • 4,141
  • 2
  • 9
  • 10
254
votes
9 answers

My position: sticky element isn't sticky when using flexbox

I was stuck on this for a little bit and thought I'd share this position: sticky + flexbox gotcha: My sticky div was working fine until I switched my view to a flex box container, and suddenly the div wasn't sticky when it was wrapped in a flexbox…
bholtbholt
  • 11,281
  • 6
  • 22
  • 32
163
votes
11 answers

How can I make sticky headers in RecyclerView? (Without external lib)

I want to fix my header views in the top of the screen like in the image below and without using external libraries. In my case, I don't want to do it alphabetically. I have two different types of views (Header and normal). I only want to fix to…
Jaume Colom
  • 1,701
  • 3
  • 11
  • 6
124
votes
9 answers

Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

I have been looking for some time now for a solution to my sticky sidebar problem. I have a specific idea of how I would like it to act; effectively, I would like it to stick to the bottom as you scroll down, and then as soon as you scroll back up I…
andbamnan
  • 1,285
  • 2
  • 11
  • 8
83
votes
17 answers

Force sidebar height 100% using CSS (with a sticky bottom image)?

I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:
72
votes
8 answers

Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery

The Instagram app has a nice sticky header that pushes the current one up in place of the new one. I found a great tutorial on how to do this natively for Android, but I'm looking to do it with JavaScript and CSS. I was able to get my header to…
Ryan Rich
  • 11,637
  • 8
  • 22
  • 31
58
votes
3 answers

pure CSS multiple stacked position sticky?

Is it possible to have multiple sticky elements stacked on top of each other in pure CSS? The desired behavior can be seen here: https://webthemez.com/demo/sticky-multi-header-scroll/index.html Only I'd prefer to use pure CSS, instead of a…
Ro Achterberg
  • 2,504
  • 2
  • 17
  • 17
57
votes
12 answers

Why border is not visible with "position: sticky" when background-color exists?

position: 'sticky' landed in Chrome 56, but it makes the border invisible in certain circumstances. Consider the following example: table { border-collapse: collapse; } thead { position: sticky; top: 0; } th { background-color:…
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
56
votes
1 answer

Pros and Cons of Sticky Session / Session Affinity load blancing strategy?

One approach to high scalability is to use network load balancing to split processing load between several servers. One challenge that this approach presents is where servers are state aware - storing user state in a "session". One solution to…
urig
  • 16,016
  • 26
  • 115
  • 184
52
votes
14 answers

position:sticky is not working

I have this HTML code:
Description
.header has a height of 150px. .navbar has a height of 20px. When the user scrolls, I want…
Wolfuryo
  • 736
  • 1
  • 7
  • 12
52
votes
4 answers

START_STICKY does not work on Android KitKat

One of my apps has a backgrouod service that uses the START_STICKY return code from onStartCommand to automatically restart when the system kills it. It seems that this is no longer working on Android KitKat. Is there any solution for this ? Should…
Muzikant
  • 8,070
  • 5
  • 54
  • 88
52
votes
3 answers

Toastr: How to prevent fade out with sticky toast on mouseover?

I've been playing with toastr and have successfully set the timeout to 0 so the toast remains sticky, however the toast disappears when I mouse out of the toast. I'd like to override this so the toast only goes away if the user clicks it - ideal…
SB2055
  • 12,272
  • 32
  • 97
  • 202
51
votes
9 answers

Sticky top div with absolute positioning

I'm using absolute positioning to have a div fill up the entire browser window. However, I wan't to combine this with a sticky div that sometimes is there and sometimes not. To make things a little clearer, check out this jsFiddle:…
Henrik Janbell
  • 1,784
  • 3
  • 21
  • 30
47
votes
11 answers

Make a nav bar stick

Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar…
user2885415
46
votes
9 answers

force footer on bottom on pages with little content

I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom. I don't want to use #footer { position:fixed; bottom:0; } AKA Sticky Footer Is this possible without jQuery? any…
pom4ik
  • 463
  • 1
  • 4
  • 5
1
2 3
…
99 100