Questions tagged [affix]

An additional element placed at the beginning or end of something.

An additional element placed at the beginning or end of a root, stem, or word, or in the body of a word, to modify its meaning. In Twitter Bootstrap it is prepend.

Prepended and appended inputs in BootStrap.

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Wrapping an .add-on and an input with one of two classes to prepend or append text to an input.

214 questions
34
votes
9 answers

Bootstrap 3.0 affix with list changes width

I'm migrating to bootstrap 3.0.0 and I'm having issues with an affixed menu to the left: as soon as it becomes affixed (after 10px scroll), its width changes. In this fiddle it gets smaller, in my real site it gets wider and expands on the actual…
Davor
  • 1,227
  • 4
  • 15
  • 31
32
votes
7 answers

How to get dynamic data-offset values for Bootstrap 3 affix method

I would like to use the Affix method described in Bootstraps documentation (http://getbootstrap.com/javascript/#affix), however the navbar I would like to fix to the top of the page after it scrolls to it can have different offset values depending…
bigmike7801
  • 3,908
  • 9
  • 49
  • 77
19
votes
10 answers

Twitter Bootstrap Affix - how to stick to bottom?

I've read the documentation, and I feel like I'm doing exactly what they show in their examples. Yet when I try it, I can't get this to work. I'd like it to work in a way similar to the docs. It becomes position:fixed after scrolling past the…
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
16
votes
5 answers

Bootstrap data-spy="affix" not working on Angular View change

I'm trying to figure out why my affix-ed panel isn't staying put when I change my Angular view. I've added the affix property directly to the panel on the first page (details), and left it in the data-spy only in the second page (flights). In a full…
PGallagher
  • 3,123
  • 2
  • 26
  • 37
15
votes
3 answers

Twitter bootstrap 3: Navbar changes width when affix fires

Well, I have a curious issue concerning the bootstrap-3 affix script. You can see the problem in this fiddle. Please maximise the result-frame horizontally and scroll down so that affix gets fired. As you can see, the navbar increases at the right…
Dong3000
  • 566
  • 2
  • 7
  • 24
14
votes
10 answers

Affix is not working in Bootstrap 4 (alpha)

According to Bootstrap 3 docs I have added following attributes to a navbar: After scrolling down the page Bootstrap 4 is not adding class to navbar which is…
Ilyas karim
  • 4,592
  • 4
  • 33
  • 47
14
votes
3 answers

Bootstrap affix not keeping the column layout

When I scroll down in my browser (chrome), the right column is pushed all the way to the left, my sidebar is pushed to the background, and and all the right-side content is over the left-side sidebar. This only happens when I apply the affix…
ILikeTacos
  • 17,464
  • 20
  • 58
  • 88
14
votes
5 answers

Twitter Bootstrap Affixed Navbar - div below jumps up

Rather hard to describe the problem. So just look at this jsFiddle: http://jsfiddle.net/xE2m7/ When the navbar gets fixed to the top the content jumps below it. CSS: .affix { position: fixed; top: 0px; } #above-top { height: 100px; …
deekay
  • 607
  • 2
  • 9
  • 17
13
votes
1 answer

Bootstrap affix not working with bootstrap class

I am relatively new to bootstrap and trying to design my page with bootstrap affix. Here in code When I removes my col-lg-6 class from that is located inside affix targeted div it works perfectly fine but it doesn't work with given bootstrap class…
Nimesh
  • 794
  • 3
  • 8
  • 18
12
votes
1 answer

Bootstrap 3 using affix to fixing navbar position to top when scrolling

This is driving me nuts... This might be simple by I'm not hitting the nail: please give a hint :-) I'm trying to play with Bootstrap 3 for a new layout for my site. I want the navbar to pin to the top of the screen when I scroll. I got it working…
kjaer108
  • 121
  • 1
  • 1
  • 3
10
votes
3 answers

Twitter Bootstrap affix events not firing

I'm trying to affix a toolbar when the user scrolls passed it. The affix portion works fine however I want to adjust the padding on my main container when the affix class actually get applied. http://getbootstrap.com/javascript/#affix-usage Has some…
8
votes
1 answer

Bootstrap affix stop working after scroll to bottom of the page

I have long page with fixed left sidebar :
gdfgdfg
  • 3,181
  • 7
  • 37
  • 83
8
votes
2 answers

.dic line format definition

I am currently investigating the most appropriate dictionary to use in an application I am building. Inspecting the dictionaries which are bundled with Sublime Text 2, the file format is as you would expect - a list of alphabetically ordered words.…
johnpaulhayes
  • 543
  • 6
  • 10
7
votes
1 answer

Bootstrap: Stop affix when reaching end of certain div

I have a sidebar thats sticks when you scroll. Now I want it to stop (and be fixed) when reaching a certain div. For illustration. What happends: http://postimg.org/image/l1n0djb0n/ What I want: http://postimg.org/image/5evr05x8n/ I needs to stop…
Pieter hein
  • 115
  • 1
  • 6
7
votes
4 answers

Sticky header after some scrolling?

okay here's an example of what i am trying to ask, the nav bar of usatoday. I'm using bootstrap affix. here's my code

this is some logo

this is some…

user3348051
1
2 3
14 15