Bootstrap 3.0 Affix - javascript

I'm wanting to fix a right hand col to the top of the window (when scrolling) using Bootstrap 3.0 and affix.
This is the html for the element:
<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">
This is the css:
.right-hand-bar.affix {
width: 390px;
position: fixed;
top: 0px;
right: 0px;
margin-top: 110px;
}
In the example here you will see that a few strange things are happening.
The fixed .right-hand-bar (popular blog posts etc) jumps to the right of the screen (due to position fixed being applied). I don't really want to mess about with the right positioning as the site is responsive.
The fixed bar jumps outside of the main container.
I've had to add a width to the fixed element which I'd rather not (due to it being responsive).
I'd also like it to stop scrolling with the page when the bottom of the fixed element hits the top of the footer (or an offset value from the footer).
Can anyone help with any of these.
Thanks in advance!

Wrap a media query for .right-hand-bar.affix styles, so they only apply to the desktop version. You don't want it to be fixed on small-screens anyway.
Then add position: relative; to the styles for .row, and the .right-hand-bar will be affixed relative to that container instead of to the entire page.

Related

Why is my websites navigation bar overlapping content on the mobile version

I'm not sure what code is causing the problem, so I'm not sure what to post.
On my website the navigation bar is overlapping the content on the mobile version
The website is www.seshilton.co.za
You have a part in your code that goes something like this:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
When I remove the position: fixed;, the image jumps down in mobile view under your navigation bar.
w3schools says the following:
"An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located."
Try to work around that fixed value. Maybe use position: sticky instead with the combination of z-index.
Try giving margin-top for the header element for smaller screen sizes as,
#media(max-width:500px){
header{
margin-top:100px;
}
something like this would workout, Trying changing the values of max-width and margin-top as per your need.

div element fixed relative to window but limited to its parent

I am trying to position a box in a fixed way relative to the window, but only within the limits of a certain section of the site. You can visualise this easier in the jsfiddle that I created.
https://jsfiddle.net/animyrch/dzrpg6gh/
My element (the yellow box) needs to remain where it is on the screen. And it does exactly that. But the wrapper element (blue box) has a height of 20em. And when the screen is scrolled further than that, the fixed element continues to stay on the screen and goes out of its wrapper. How can I ensure that it doesn't go further than a specific point (for example, after 19 em or the starting point of the padding or the border of the wrapper, etc.) and starts to disappear from the screen as the scrolling goes on?
I have searched for an answer but all my search queries are understood as "keeping an element fixed relative to its parent". It's true that when the fixed element reaches a certain point, I want it to be no longer fixed relative to the window but relative its parent but it's clear that it's not the same thing.
Thank you in advance for your answers.
Here is the code from jsfiddle:
HTML
<div class="wrapper">
<div class="fixedElement">
<p>This should stay fixed on screen but shouldn't go lower than its parent</p>
</div>
</div>
<div class="enlargingPage"></div>
CSS
.wrapper {
background-color: blue;
padding: 2em;
left: 50%;
top: 50%;
height: 20em;
}
.fixedElement {
background-color: yellow;
position: fixed;
}
.enlargingPage {
background-color: gray;
height:30em;
}
What you are probably looking for is position: sticky. Check the MDN documentation on how to use it.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Remember browsers natively don't support it much. http://caniuse.com/#feat=css-sticky
You can obviously polyfill it using one of the polyfills out there. Example - https://github.com/wilddeer/stickyfill

jQuery Mobile: absolute external panel on right side not working

I want to use an external header and two external panels, one at the left, one at the right. The catch: The panels should be always visible on big screens.
I had some problems positioning the panels with an external header (internal works fine), which I could solve for the left panel when using
position: absolute;
left: 0;
top: 4em;
However, this does not work with the right panel, using
position: absolute;
right: 0;
top: 4em;
just places it above the left panel.
You can see this on this jsFiddle: https://jsfiddle.net/9eb4mekr/
When I use position: relative; float: right; instead, the right panel will be on the right but below every other panel (try it in the jsFiddle).
Any Idea on proper positioning of external panels when always visible (big screens)? Plus an external header?
I found the problem. Well, not really the problem, but at least the solution, thanks to Tasos Anastasiou: Setting the header position to fixed, e.g. with data-position="fixed" in the header div will make relative positioning work again on both panels :)
Here is an updated, working jsFiddle: https://jsfiddle.net/vhkmok8o/

position fixed on bootstrap 'affix' not working

I added this plugin to this website. The issue that i am having that i cant have the navigation stay fixed on the website for some reason, you can see the little navigation when you scroll down but it does not stay fixed like in the plug in.
does anyone have a way i could resolve this, thank you very much!
Here is the class
#dot-nav{
right: 10px;
top: 50%;
margin-top: -50px;
height: 100px;
z-index: 999;
}
Your nav is positioned fixed to the most nearest relative position item, that is the div with class page-wrapper is 3673 pixels height so the position top:50% is actually doing it well to the middle of that div.
The easiest solution for your problem is to take the whole #dot-nav item outside the page-wrapper and it will work well. Put it after the page-wrapper.

Need a fixed positioned div inside an absolute positioned div

I'm using the Snap.js plugin - (it allows you to create scrolling side drawers/panels).
It works by creating 3 absolutely positioned divs, one of which contains main content.
Is there a way to position a div fixed to the top of the window when it is itself inside the absolutely positioned div.
At the moment i'm just getting the fixed div to pin to the top of the absolutely positioned div, rather than to the top of the browser. When I scroll, the div remains fixed to the top of the main content, but not the window.
For example:
<div style="position:absolute;">
<div style="position:fixed;top:0">
<!-- some content which needs to be pinned to top of window -->
</div>
</div>
At the moment i'm using javascript to track the scroll offset and manually adjust the top position of the child div, which is not ideal for performance.
Any help appreciated!
I've made a fiddle showing my javascript workaround - it jitters when scrolling in internet explorer, any ideas.
<div id="displayed-content" class="snap-content scrollable">
<div><!-- regular content --></div>
<div><!-- fixed content --></div>
<div><!-- footer content --></div>
</div>
http://jsfiddle.net/bxRVT/
I am guessing a bit about what you are trying to do, but you might be looking for something like this:
<div class="local-wrap">
<div class="fixed">
Some content which needs to be pinned to top of window
</div>
<div class="port">
Regular content...
</div>
</div>
and apply the following CSS:
.local-wrap {
position: relative;
}
.local-wrap .fixed {
position: absolute;
top: 0;
left: 0;
background-color: lightgray;
width: 100%;
height: 5.00em;
}
.local-wrap .port {
position: relative;
top: 5.00em;
min-height: 10em;
height: 15em;
overflow: auto;
border: 1px solid gray;
border-width: 0 1px 1px 1px;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/pTJbW/
Essentially, to get a fixed block with respect to a block element, you need to use absolute positioning. Fixed positioning is always with respect to the root element or view port, so position: fixed won't help you.
What I have done is define a .local-wrap container, with two child blocks, one which is
positioned absolutely to the top of .local-wrap and the other in regular flow. I used position: relative to position it below .fixed, but a top margin would have also worked.
I fixed some heights to demonstrate scrolling content within the local window/port, but that can be changed depending on your design and application.
Disclaimer
I am not familiar with snap.js so there may be other considerations to consider.
Comment on CSS3 Transform and Fixed Elements
According to the CSS3 specs, if you apply a transform to an element, call it div.transformed, then div.transformed creates a new stacking context and serves as a containing block for any fixed position child elements that it contains, which is why in your scenario, the fixed position context does not stay at top of the window.
For reference, see Mozilla Developer Network -> CSS Reference -> Transform

Categories

Resources