Develop Reference

How to use css bootstrap list-group with affix to create a sticky menu in a column?

I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?

First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.

As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.

Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.

How to distribute parent element's width among child element

I am using twitter bootstrap for a site and basically I have a order list within a div element. When the screen get resized to 768px, I want parent's div width, equally distributed among all child list.
Do I need use media queries and JavaScript? Can anyone help me getting started with this concept please? The code may look like followings--
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-7 col-lg-9 pull-right process-tab">
<ol class="investment-pagination c-white pull-right process-tab-bar">
<li data-tab-target="goalName" class="active">1</li>
<li data-tab-target="amountTerm">2</li>
<li data-tab-target="riskLevel">3</li>
<li data-tab-target="investment">4</li>
<li data-tab-target="accountType">5</li>
<li data-tab-target="fund">6</li>
</ol>
</div>
</div>
EDIT: bootply.com/ibnLAYxmbB

Your parent is not col-xs-12 it is col-xs-6. So, first fix that.
Add a media query for max-width: 768px
Make your ol as display: table
Make your li as display:table-cell and remove float and width
In effect, your CSS would look like this:
#media screen and (max-width: 768px) {
.investment-pagination { display: table; width: 100%; }
.investment-pagination li { display: table-cell; width: auto; float: none; }
}
Demo: http://bootply.com/CRMNgpsjMV

alternative of scrollLeft()

G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>

I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.

Having a html element stay in the same position without using position: fixed

To show what I want to do, here is a url. http://octopuscreative.com .
I want something that when I scroll down the height, the cyan div disappears like the website above.
I currently have the scrolling working in my code, however, I cannot see the rest of my HTML that is below my #main div. I don't know if this has anything to do with my new #slideshow div (with a fixed position).
I thought since the #slideshow div had its height reduced to 0, I would be able to see the HTML underneath the #main div, but all I see below is white.
var header = $('#slideshow'),
headerH = header.height();
$(window).scroll(function() {
if (header.height() >= 0) {
header.css({
height: -($(this).scrollTop() - headerH), position: 'absolute'
});
}
else if (header.height() < 0 ) {
header.css('height', 0);
header.css('position', 'absolute');
}
});
</script>
</head>
<body>
<div id="top">
<div id="stallion">
<img id="stallionpic" src="stallion1.png" />
<h1 class="h1">Stallion Stride</h1>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="slideshow">
<div id="leftbutton"></div>
<div id="rightbutton"></div>
<div id="slideshownav">
<ul>
<li><a class="active"></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<div id="slideshow_inner">
<li id="pic1"><a><img src="pic2.jpg" /></a></li>
<li id="pic2"><a><img src="pic1.jpg" /></a></li>
<li id="pic3"><a><img src="pic3.jpg" /></a></li>
<li id="pic4"><a><img src="pic4.jpg" /></a></li>
</div>
<p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
</div>
<div id="mainContent">
<p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
</div>
</div>
<div id="footer">
</div>
</body>

I'm the lead dev at Octopus. Here's the bare minimum amount of code to make something like that header effect work (it does use fixed position).
HTML
<div id="hero">
<h2>I am the hero</h2>
</div>
<div id="main-content">
<h3>I am the main content</h3>
</div>
CSS
* {
margin: 0;
}
div#hero {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #3D6AA2;
height: 300px;
}
div#main-content {
height: 1500px;
background: #fff;
margin-top: 300px;
position: relative;
z-index: 1;
}
I also threw together a jsFiddle that demonstrates it, along with the bit of parallax stuff the site does: http://jsfiddle.net/paulstraw/FW4FF/
Hope that helps!

position: fixed; positions the element based on viewable screen coordinates, so when you scroll, the position will update to reflect the 'new' top/left boundaries. position: absolute; is more like what you are describing, it will keep the element in the same place, regardless of the content around it, or the browser's scroll position. However, this will take the element out of the 'flow' of the page, and other elements will act like it is not there (and might overlap it). In which case, you will likely have more luck just floating your header left: float: left;.
If you do this, you will probably need to clear the floats in your main div by adding the css style: clear: both;. This will push the main div below any floated content above.

Javascript to make the page jump to a specific location

I there a way in javascript to make the page jump to a specific location on the page, such as
<span id='jump_to_this_location'></span>
I do not want to re=load page,

2020 Answer
A simple and modern way to do this would be like this:
document.getElementById("jump_to_this_location").scrollIntoView({behavior: 'smooth'});
The behaviour: 'smooth' argument makes the jump... well... smooth. Which is something probably most of you want.

You can set the location.hash property, like this:
window.location.hash = "jump_to_this_location";
You can give it a try here.

If you use jQuery it's pretty simple here is some sample code
Bellow is the #nav where I stored all the clickable links to the articles in this example
Note: I used the goto attribute(custom) to pass the ID for the target Article
<div id='nav'>
<div goto='text1'>Link To Text 1</div>
<div goto='text2'>Link To Text 2</div>
</div>
Here, bellow are the Articles you will be jumping to.
Note: The JavaScript in the last code sample takes the distance of the tag to the top of that page and then scrolls the page down by that same distance measurement taken.
<div id='articles_container'>
<article>
<h1 id='text1'></h1>
<p>
Sample article Paragraph 1
</p>
</article>
<article>
<h1 id='text2'></h1>
<p>
Sample article Paragraph 2
</p>
</article>
</div>
Finally this is the javascript + jQuery that makes it all work, this solution is best when you are working with fixed and layered components.
<script>
$(document).ready(function(){
$('#nav div').click(function(){
var id = "#" + $(this).attr('goto');
var top = $(id).position().top;
$('html').scrollTop(top);
});
});
</script>
javascript jquery

This can be accomplished by first creating an anchor for the page landing spot using HTML.
<a name="jumpHere">somewhere</a>
Once you have the landing site, simply use the JavaScript:
window.location = 'yoursite.html#jumpHere';

I realize this question is five years old, but people still find it, and it seems a shame no one has ever answered it...
Specifically "Without Reloading Page" as asked,
and where there is a name="HERE" or id="HERE" label somewhere in the html ("HERE" is of course an example of any label),
then Javascript can do:
if (navigator.userAgent.match(/Chrome|AppleWebKit/)) {
window.location.href = "#HERE";
window.location.href = "#HERE"; /* these take twice */
} else {
window.location.hash = "HERE";
}
Works for me.

You don't need JS for that.
Accessing yourpage.html#jump_to_this_location will do. This can be done through a link (jump)

The rough sketch illustrates using the id attribute in element section to jump to different parts of the page using the anchor in navigation. That is, in your navigation:
<li></li>
<!DOCTYPE html>
<html>
<head>
<title>Go to section</title>
<style type="text/css">
.navigation {
position: fixed;
background-color: green;
width: 100%;
height: 50px;
margin-top: 0px;
margin-right: 0px;
}
.navigation li {
display: inline;
width: auto;
list-style-type: none;
font-size: 20px;
text-decoration: none;
}
a:hover, {
background-color: white;
}
a: focus {
color: lime;
}
</style>
</head>
<body>
<nav>
<ul class="navigation">
<li>About US</li>
<li>Our clients</li>
<li>Our Offices</li>
<li>Projects</li>
<li>The team</li>
<li>Contact US</li>
</ul>
</nav>
<section id="about">
<div class="about" style="background-color: skyblue; height: 500px;">
</div>
</section>
<section id="clients">
<div class="clients" style="background-color: blue; height: 500px;">
</div>
</section>
<section id="branches">
<div class="branches" style="background-color: lime; height: 500px;">
</div>
</section>
<section id="samples">
<div class="samples" style="background-color: olive; height: 500px;">
</div>
</section>
<section id="team">
<div class="about" style="background-color: grey; height: 500px;">
</div>
</section>
<section id="contacts">
<div class="about" style="background-color: gold; height: 500px;">
</div>
</section>
</body>
</html>

Along with the "#", you might want this CSS attribute: This one "jumps" to the target:
scroll-behavior: auto;
This one smoothly scrolls the screen until it gets to the target:
scroll-behavior: smooth
Reference: https://www.w3docs.com/learn-css/scroll-behavior.html
Caution: It seems to be a relatively new feature, so it may not be available on all Browsers.

Came here trying to find out why my page (1) didn't scroll at all when going to page.com/#hash and (2) why it wasn't scrolling into the correct position when using scrollIntoView(). This solved both my issues, so someone might find it useful too:
window.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
});
If this still doesn't scroll into the correct position then I think that adding a timeout before setting the hash again could do the trick, though I'm not 100% sure on that, someone might be able to correct me here.

Try this (using JavaScript):
location.hash = "div-Name";