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
18
votes
2 answers

Opposite of position: sticky

Setting the css attribute position to sticky causes the element to positioned relative until a certain point is scrolled too at which point it becomes fixed. How can I achieve the reverse i.e the element is fixed until a certain point then becomes…
Connor Bishop
  • 921
  • 1
  • 12
  • 21
17
votes
5 answers

Position: sticky - scroll bouncing when combined with javascript height adjustment

After playing with position: sticky for a while, I started implementing it for sticky navigation and ran into this interesting, but frustrating scroll bouncing issue. This is a common type of navigation behaviour seen on many sites, where you would…
bluefantail
  • 1,079
  • 1
  • 10
  • 14
16
votes
3 answers

If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?

This is a question when I read an article on the MDN position property. I thought that there was a clear difference between the behavior of sticky described there and the actual behavior. According to the MDN, sticky position elements are treated…
user11445960
16
votes
1 answer

Using Sticky Kit jQuery plugin, but can't figure out how to use the 'offset_top' option?

Has anyone had any experience using the excellent Sticky Kit jQuery plugin? http://leafo.net/sticky-kit/ I can't figure out how to use the 'offset_top' option? The documentation for the options is a bit vague, the example shown is…
StephenMeehan
  • 1,083
  • 2
  • 15
  • 26
15
votes
2 answers

Bootstrap 4, navbar fixed-top and other sticky-top elements

Here the reproduction: https://jsbin.com/lawafu/edit?html,output Is this a bug? A mistake? A problem? An unrealizable idea? Before scroll: After scroll: What I need: Obviously I need to see the sidebar when I scroll down the page, using…
user4412054
15
votes
11 answers

position: sticky not working in firefox

position:sticky is said to be working in firefox but I'm not seeing my sidebar stick. My html looks like this:
side
content
My css: .content{ height:…
Elfy
  • 1,733
  • 6
  • 19
  • 39
14
votes
2 answers

Why bottom:0 doesn't work with position:sticky?

I'm trying to understand what css "sticky" does. I can get it to stick to the 'top' of its parent, but not to the 'bottom' My test code is: .block { background: pink; width: 50%; height: 200px; } .move { position: sticky; …
user801347
  • 1,165
  • 3
  • 14
  • 28
14
votes
1 answer

Safari calculates wrong top position with position sticky in table when there are multiple tbodies

I have a table that is grouped with multiple elements, each one having one initial row with a element that titles the group. I wan't these :s to be sticky but I can't get safari to set the correct top position. If I set top: 0px or…
nej_simon
  • 171
  • 7
14
votes
5 answers

How to create sticky header bar for a website

I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great…
Arsh Kapoor
  • 185
  • 2
  • 2
  • 7
13
votes
2 answers

How to set the button sticky property properly?

I've been playing around with tkinter a bit and I can't figure out why the "sticky" attribute doesn't seem to be working with my button. I've specified sticky to be NW which should cause my button to stick to the top left edge but for some reason…
user637965
13
votes
3 answers

ReactJS error Failed to compile 'define' is not defined

The application which I'm trying to compile is not compiling with the external jquery & its associated JS files. The moment I try to link those files to my HTML page in a ReactJS application, it throws me below errors. Errors are : 'define' is not…
Akshay patil
  • 241
  • 1
  • 3
  • 8
13
votes
3 answers

CSS Sticky Header/Footer and Fully Stretched Middle Area?

With CSS, how can i simply get a page with sticky header and footer which are appearing forever, whenever the page is scrolling or not. I found some sample online, but what i additional want is, the middle content area should be a 100% stretched…
夏期劇場
  • 17,821
  • 44
  • 135
  • 217
12
votes
2 answers

Keep an element fixed within a container during window scroll

I have a question that I think will be best explained using an image, so I am going to attach it. Ok, so basically what I have is a parent container, and an element inside it (it will actually be a block of text), which we will refer to as the…
jkilp
  • 317
  • 2
  • 7
  • 17
12
votes
1 answer

Advanced jQuery "Sticky Bottom" and also Scrolling Sidebar Issue

Having searched everywhere for a solution to this problem, and attempting to use a few plugins like jQuery Way-points, to no degree of success, I hope that someone here will be able to offer a solution to this. As it is a bit complex to explain…
Steve Adams
  • 264
  • 1
  • 11
12
votes
2 answers

Why is my element not sticking to the left when using position sticky in css?

I want to fix an element to the top and left of the screen using position sticky when scrolling a large div either vertically or horizontally. Fixing to the top is working fine, but fixing to the left is not. This is my html page: .sticky { …
Erik Vorstenbosch
  • 135
  • 1
  • 1
  • 6
1 2
3
…
99 100