I have a tricky little problem I can't wrap my head around.
Please see http://jsfiddle.net/KKczd/ for reference.
Scenario: I have two bootstrap ordered columns: On large screens, they sit next two each other, on smaller screens the one on the right flows above the left column.
<div class="row">
<h1>Header section</h1>
</div>
<div class="row">
<div class="col-md-3 col-md-push-9" id="right">...</div>
<div class="col-md-9 col-md-pull-3" id="left">...</div>
</div>
This basic layout and functionality works perfectly.
Goal:
For large screens, when the page scrolls down, I want the right column to stay on the top of the page at all times. For small screens, I want the right column (now the first row) to stay on top with content scrolling underneath it as the content scrolls up.
Problem:
I've written some javascript that only seems to make the right column get lower and lower - and it has no impact on the section on smaller screen widths - except some magical disappearing.
I have played with offset, and resetting offset, I have also tried using some css positioning but it just gets hackier and hackier. Also, I'm trying to use as many default bootstrap styles as possible, and as few positioning hacks as possible.
Is this even possible to do?
Goal:
{1}[For large screens, when the page scrolls down, I want the right column to stay on the top of the page at all times].
{2}[For small screens, I want the right column (now the first row) to stay on top with content scrolling underneath it as the content scrolls up.]
In bootstrap website itself they used your required concept for {1} use the class = 'affix' for the right column,
For {2} , I have an idea for that, Create one navbar at the top of the screen and set the class = 'navbar-default navbar-fixed-top visible-xs visible-sm hidden-lg hidden-md' and give the same right column content in that navbar also, In column right use the class = 'visible-lg visible-md hidden-sm hidden-xs'. When the screen size reaches small screen, it hides the content of right column, and shows the navbar content at the top.
Hope this will be useful, Thank you.
Related
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:
https://jsfiddle.net/oavgLrf9/
I want my sidebar to add a fixed class when the second module reaches top, the problem is that both of the modules use height auto so their height change depending of the monitor.
<div class="sidebar">
<div class="mod-1"></div>
<div class="mod-2"></div>
</div>
Also I want that when the user scrolls top the side bar goes top too, and when it reaches bottom changes to absolute, like this example:
http://jsfiddle.net/gmolop/y3tdL9wd/
I tried using the sticky-kit plug in it does almost exactly what I want, would be the example 4, but it doesn't stick in the height I need because of these changing values.
you can use HcSticky to solve your problem.
http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/
see examples:
http://someweblog.com/demo/hcsticky/
I'm attempting to use Bootstraps Affix function in a sticky subnav.
<div class="container" data-spy="affix" data-offset-top="417" id="subnav">
I've dialed the offset so that there's no "skip" or "jump" when the subnav snaps into place. The problem I'm having is that the content below the subnav is jumping up the page, under the nav/subnav, because the subnav is changing from relative to fixed and it loses it's computed height.
Is there a way to counteract this? My initial though its to add/remove a class to the next div that adds in the correct padding or margin.
Here's a jsfiddle to help illustrate the problem. Pay attention to the H2 as you scroll.
I've taken a look at this.
When the 2nd scrolling nav-bar is .affixed, it takes on a position:fixed, and the subsequent div readjusts up into the space where it was, causing the flicker.
I tried listening to affixed.bs.affix without luck, but that's the route I'd check out. See http://getbootstrap.com/javascript/#affix-events.
It should generally be something like:
$("#subnav").on("affixed.bs.affix", function() {
// Adjust the next div here. Add a top margin
});
Making a web app similar to instragrams layout and the post items have a full width image and then a div heading above each once.
e.g.
<div class="blogpost">
<div class="blogtitle">
</div>
<div class="blogimage">
</div>
</div>
This is a simple list of the posts with the title above. On instragram, once the title hits the tops of the page (because of user scroll) that title div is fixed. Once the user scrolls more and the next title div meets the bottom of the current fixed once, the current one is pushed up and the new one fixed to the stop.
Any help on this?
You are looking to create a site that uses parallax scrolling. Here is a link to a helpful site.
Make a variable with a value of zero, and check (in JQuery) $('.blogtitle').eq('variableWithZero')offset().scrollTop() and if it's zero, change its position to fixed, and add one to the variable with zero. Before that, remove() (.blogTitle).eq('numberWithZero - 1)
This will only help with scrolling up, but it should get you started ;)
If you check out this link, you will see that as you scroll down, the navigation has both affix and scrollspy functionality (From bootstrap 3)
http://codepen.io/datanity/pen/thnua
However, if you add white space at the top, the affix/scrollspy occurs in the wrong location. For example, this is with 800px of white space ontop.
http://codepen.io/datanity/pen/haKzg
Now of course here, you can adjust the affix/scrollspy code so that way it works with the 800px height ontop but, my problem is that I have no idea what space I will have on top. Sometimes it will be 2000px other times only 300px. Also, there is no way for me to know the id/class of the divs that appear ontop. Sometimes it will be 10 divs, sometimes 0, and they will always have different id/classes.
Is there a way that the affix and scrollspy can be triggered relative to the container it is in, and not a fixed px location from the top of the body?
Thanks for any help!
Tim
adding this to the top of the js fixed the issue. With this method, it does not matter how much white space or how many divs you have ontop. Your bootstrap scrollspy and affix will always be in the correct place!
$('#mynav').affix({
offset: {
top: $('#mynav').offset().top
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
});
Add an ID to the section element (located at the top of the HTML page). I'm assuming this is the element that you're concerned about changing heights.
<section id="top-section" style="height:800px;">
</section>
Then add these lines to your JS file:
var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);
This queries the rendered height of the section element, and then fixes your sidebar response height accordingly.
If you will also have an unknown amount of sections, then you should wrap the code that creates the sections in a div element. For instance, if you're using PHP to build the section area of your webpage, you should do something like this:
<div id="section-wrapper">
<?php echo "Whatever code you have here" ?>
</div>