I want to make a simple html site which have some paragraphs and a drop-down list. When the site is loaded I want all the paragraphs to be inserted in the drop-down list (the first 50 characters for each option). When I choose an option, I want the paragraph of the chosen option to be bold and the page to scroll there. So far, I only did this. Please help! I want only in javascript.
<script language="javascript">
function add()
{
var x = document.getElementById("myselect");
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("value", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y;
x.add(option);
}
}
function dothis()
{
//var w = document.getElementById("myselect").selectedIndex;
//w.scrollIntoView();
var x = document.getElementById("myselect");
var y = document.getElementById("myselect").options;
}
</script>
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Εργαστήριο 10 άσκηση 3</title>
</head>
<body onload="add()">
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<select id="myselect" onchange="dothis()">
<option>1</option>
<option>2</option>
</select>
</body>
First, you want to find the good paragraph from your select. So you should find a way to link the paragraph to its select option.
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("id", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y.substring(0,50) + "..."; // Cutting the text in select to the first 50 characters
option.value = "all_pars" + i
x.add(option);
}
Here we go. We are now, rather than a value, choosing a id for each paragraph, and adding that id as a value to the linked select option. We are also cutting the paragraph down to 50 characters.
With this, it's easy to find the paragraph and change its style.
function dothis()
{
// Value indicating which paragraph should be chosen.
var y = document.getElementById("myselect").value;
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
// Putting all paragraph to not-bold
pars[i].setAttribute("style", "font-weight: normal;");
}
document.getElementById(y).setAttribute("style", "font-weight: bold;"); // Putting our paragraph to bold
}
Now we have our text in bold when we select it. We just have to add anchor to each paragraph and change the location to the anchor when we select the paragraph. Here is the final code, with lorem ipsum as paragraphs.
function add()
{
var x = document.getElementById("myselect");
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("id", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y.substring(0,50) + "..."; // Cutting the text in select to the first 50 characters
option.value = "all_pars" + i
x.add(option);
// Add anchor to the paragraph
var newLink = document.createElement('a');
newLink.name = "all_pars" + i;
pars[i].appendChild(newLink);
}
pars[0].setAttribute("style", "font-weight: bold;");
}
function dothis()
{
var x = document.getElementById("myselect");
var y = document.getElementById("myselect").value; // Value indicating which paragraph should be chosen.
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("style", "font-weight: normal;"); // Putting all paragraph to not-bold
}
document.getElementById(y).setAttribute("style", "font-weight: bold;"); // Putting our paragraph to bold
window.location = '#' + y; // Jump to anchor
}
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Εργαστήριο 10 άσκηση 3</title>
</head>
<body onload="add()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<select id="myselect" onchange="dothis()">
</select>
</body>
</html>
How could I make my div move to the top of a page while scrolling as it does by default, but then once it reaches the top of the page, stay there? I have seen this done on other pages, and my guess is that it might not be able to be done with CSS alone, but might need jQuery and JavaScript as well. I would prefer using just CSS, but using jQuery and JavaScript is an option.
Check out this snippet below:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Made for my post: Stick div at top after scrolling.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
gravida.</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
Tutorial: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html
are you looking for this..
position:fixed;top:0px;
<div class="btn-toggle">
<div class="description ">
<div class="Area" style="height: auto; visibility: visible; overflow: hidden;">
<div class="scrollbar" style="height: 340px;">
<div class="watch" style="height: 340px;">
<div class="round" style="height: 100px; top: 0px;"></div>
</div>
</div>
While running selenium code, need to scroll to the bottom of the div. How do update "style =height: 100px; top: 100px;".
How to accomplish this using Javascript?
Sorry there was little confusion ,but not not now. check out fiddle .See style properly.
Working fiddle
Use the following code , say you want to scroll to bottom of "round" div,
var scr = $('#box')[0].scrollHeight;
$('#box').animate({scrollTop: scr},2000);
CSS :
#box{
overflow:auto;
width:300px;
height:200px;
}
Say HTML is
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non tellus nisi, at euismod lacus. Praesent elementum, purus vitae imperdiet bibendum, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra neque, non dignissim sem condimentum vitae. Quisque varius nibh nec felis facilisis nec consectetur augue ultrices.
Nullam ut arcu nisi, eu volutpat neque. Etiam lobortis, erat vel mollis aliquam, sapien eros bibendum erat, vel mollis purus neque sit amet quam. Proin semper aliquet leo. Morbi erat ipsum, vehicula eget mattis sed, venenatis in lectus. Cras quis dui nunc. Vestibulum viverra tempus nisl pulvinar tempor. Donec vitae nunc quam, eu placerat nulla. Suspendisse potenti. Nulla ante dolor, varius eget porttitor eu, malesuada vel nisl. Vestibulum in justo eros. Maecenas id lorem metus, et auctor nibh. Maecenas ut porttitor felis.
Praesent blandit elementum fringilla. Curabitur tincidunt, libero in convallis volutpat, enim purus sodales lacus, vel euismod ante erat nec est. Nam non metus quis lorem ornare dictum sit amet et mauris. Curabitur molestie porta tortor vel adipiscing. Pellentesque sed nulla vel neque tempor sodales. Aliquam erat volutpat. Nullam nisl mauris, faucibus at blandit mollis, malesuada eu risus. Nunc urna lacus, egestas et euismod non, vehicula sed ligula.
</div>
I am trying to create a hidden div (a header) that slides down once the scroll readers a certain point. Very similar to this site.
I trying to inspect it to see how they did it, but I can't figure it out. I am not sure if they use pure CSS transitions or script. Many .js and javascripts do the opposite and have a div slide up/hide, but that isn't want I want.
I know that I have to build out two headers, one visible and one hidden. I am lost as to how to make the hidden header visible when I scroll down to 200px for example.
The HTML:
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header home --!>
<div class="header_homehidden">
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header homehidden --!>
The CSS:
.header_homehidden {
webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
transform: translateY(-90px);
}
.header_home {
position: absolute;
z-index: 999;
color: #fff;
width: 100%;
background-color: transparent;
}
.header {
position: fixed;
top: 0px;
width: 100%;
background: white;
padding-top: 20px;
z-index: 999;
color: #000;
}
</style>
Any help is much appreciated.
HTML:
<body>
<div>
<div class="header"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat.</div>
</div>
</body>
CSS:
body {
margin: 0px;
}
.header {
background: black;
width: 100%;
height: 50px;
position: fixed;
display: none;
}
Jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".header").slideDown();
}
if ($(window).scrollTop() < 100) {
$(".header").slideUp();
}
});
Fiddle:
http://jsfiddle.net/mzz2J/
Try this code:
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '0px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});
Working Example
Source: http://return-true.com/2010/04/scroll-activated-slide-down-header-with-jquery/