I need to keep track of the page offset on a website.
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var Y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
Using the above code returns the vertical offset for me on all desktop browsers. However, I only get 0 on mobile browsers. How can I get the scroll location on mobile?
I guess this might help you:
Demo : Fiddle
JQuery
$(window).scroll(function (event) {
var scroll = $(window).scrollTop(); // This would give you offsetY while you scroll
$(".scrollY").text(scroll); // This is just to display for instance.
});
Open in Mobile
Update
JavaScript
window.addEventListener('scroll', function(){
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
document.getElementsByClassName("scrollY")[0].innerHTML = scrollTop;
}, true)
.scrollY
{
position:fixed;
top:0px;
left:0px;
padding:10px;
display:block;
width:auto;
height:auto;
background:red;
color:yellow;
}
.title h1
{
text-align:center;
}
div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px 0px;
border-radius:10px;
}
<div class="scrollY"> </div>
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
Demo : Fiddle
Related
It's hard to explain using words, better look at example i made.
https://jsfiddle.net/yoz6pkh0/
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="filter">FILTER</div>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum ...</p>
...
<p>Lorem ipsum ...</p>
</div>
I have the navbar that i hide on scrolling page down and show on scrolling up.
I need to make an element (lets call it FILTER) that on page load is located in hero-section but become sticky to navbar when scrolling to FILTER position or below and vice versa when scrolling up.
I solved the problem in my way but i wonder if any better solution exists? Is it necessary to clone FILTER element?
I think there is a better solution than cloning the element, you can use this code:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.container {
margin: 0px 200px;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
nav {
background-color: blue;
color: white;
margin: 0;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0px;
transition: top 0.5s;
}
.filter {
background-color: red;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
li {
padding: 15px;
}
.main {
padding: 50px 200px;
}
.hero {
padding: 150px 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: bisque;
height: 250px;
}
JS:
let filter = document.getElementsByClassName("filter")[0];
let fixed = false;
let filterTop = filter.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", function() {
if (filter.getBoundingClientRect().top <= 50 && !fixed) {
filter.style.position = 'fixed';
filter.style.top = '50px';
fixed = true;
} else if (window.scrollY <= filterTop - 50 && fixed) {
filter.style.position = 'static';
filter.style.top = '';
fixed = false;
}
});
What I've done here is removing the clone (and the styles related to it ) and making the position of the filter fixed or static according to the scroll.
I want to show a div only if the page has scrollbars, and hide it if not. I want to do this in either pure CSS or JavaScript (if impossible in CSS).
I've found a question on Stack Exchange, but it's infested with that garbage jQuery cancer, so it's useless. I'm talking about pure JavaScript -- not jCancer.
Here's a pure JS solution, using this function:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
Edit (description):
The function returns true if the element is scrollable, false otherwise.
Example:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
// make scrollable divs have a red border
document.querySelectorAll("div").forEach(div => {
if (isScrollable(div)) div.style.borderColor = "red";
});
div {
border: 1px solid grey;
width: 200px;
overflow: auto;
margin-bottom: 1rem;
}
div#div1 {
height: 100px;
}
div#div2 {
height: 170px;
}
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat.
</div>
I have an effect that makes the header become un-fixed when a specified div hits the top of the screen, and scroll with the rest of the content.
This works perfectly and i wrapped the "const targetTopPos = targetEl.getBoundingClientRect().top" in a resize event listener. But its calculations are wrong if the page is already scrolled and i have no idea why.
Another issue is that if the page is refreshed scrolled down, the header will be there until you scroll.
Here is the code:
window.onresize = function(event) {
const targetTopPos = targetEl.getBoundingClientRect().top;
console.log(targetTopPos);
};
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
const targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
I write the "targetTopPos" to the console so you can see the issue
It's because you redefine targetTopPos as a const in your onresize event.
You only have to asign the new value to targetTopPos
see code below
window.onresize = function(event) {
targetTopPos = targetEl.getBoundingClientRect().top;
console.log(targetTopPos);
};
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
let targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
I have a very simple page I want to be able to show text from a link.
Here is my webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Encyclopedia</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is our Encyclopedia about animals</h1>
<p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
to your email for when we have a more updated selection
</p>
<nav id=n av1>
<ul>
<li>Home</li>
<li>Image gallery</li>
<li>SignUp</li>
</ul>
</nav>
<nav id=n av3>
<ul>
<li>Marine life</li>
<li>Mammals</li>
<li>Birds</li>
<li>Reptiles</li>
<li>Amphibians</li>
</ul>
</nav>
</body>
</html>
I want the links about animals to show text I know right now I got it set up to go to the page its already on. But how would I go about doing it so that when I click the link text about the topic appears on the page?
Lots of ways to do it but here's a simple way
You'll need a DIV to fill with text
<div id="uniquename3" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;width:120px;">Content goes here.</div>
On the Href's you'll need something like this.
<a onmouseover="document.getElementById('uniquename3').innerHTML = 'Mammels\,some interesting info about mammels\, more interesting info about mammels';ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">Mammels</a>
// http://bontragerconnection.com/ and http://willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
Here's an example of using js to show and hide elements based on which link is clicked.
const app = {
init: function() {
document.querySelectorAll(".link").forEach(link => {
link.addEventListener("click", app.nav);
});
},
nav: function(ev) {
ev.preventDefault();
let currentPage = ev.target.getAttribute("data-target");
let content = document.querySelectorAll('.content')
for(i = 0; i < content.length; i++) {
if(content[i].classList.contains('showing')) {
content[i].classList.remove("showing");
}
}
document.getElementById(currentPage).classList.add("showing");
}
};
document.addEventListener("DOMContentLoaded", app.init);
.content {
display: none;
}
.showing {
display: block;
}
#marine-life {
background: green;
}
#mammals {
background: blue;
}
#birds {
background: yellow;
}
#reptiles {
background: purple;
}
#amphibians {
background: red;
}
<body>
<h1>This is our Encyclopedia about animals</h1>
<p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
to your email for when we have a more updated selection
</p>
<nav id=n av1>
<ul>
<li>Home</li>
<li>Image gallery</li>
<li>SignUp</li>
</ul>
</nav>
<nav id=n av3>
<ul>
<li><a class="link" data-target="marine-life" href="#">Marine life</a></li>
<li><a class="link" data-target="mammals" href="#">Mammals</a></li>
<li><a class="link" data-target="birds" href="#">Birds</a></li>
<li><a class="link" data-target="reptiles" href="#">Reptiles</a></li>
<li><a class="link" data-target="amphibians" href="#">Amphibians</a></li>
</ul>
</nav>
<div id="contentWrap">
<div id="marine-life" class="content">
<h1>Marine Life</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="mammals" class="content">
<h1>Mammals</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="birds"class="content">
<h1>Birds</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="reptiles" class="content">
<h1>Reptiles</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="amphibians" class="content">
<h1>Amphibians</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
</div>
</body>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a Bootstrap affixed navbar, but when i try to scroll to a div, the navbar overlays the div text, so i can't read it.
Actually i can not know of your scenario from very little code provided. Anyways i have come up with related demo here. Have a look, see if it helps you.
Here in following we would scroll Down to Header Level 3 content having class scrollStop.
My Approach:
1) Finding position of Header Level 3 from top using offset().top
2) Finding outerHeight() of < header > having class header.
3) Now Top Position - Header Height helps us to get actual position to scroll by removing header's height.
4) Finally animate scroll to that position.
Working : Demo
$(".scroll").click(function()
{
var scrollPos = $(".scrollStop").offset();
scrollPos = scrollPos.top;
var headerHeight = $(".header").outerHeight();
var actualPos = scrollPos - headerHeight;
$("body,html").animate({'scrollTop': actualPos});
});
body
{
margin:0px;
}
.header
{
margin:0px;
display:block;
left:0px;
top:0px;
position:fixed;
width:100%;
height:50px;
background:rgba(180,30,30,0.7);
}
.container
{
margin:55px auto 0px auto;
background:#ccc;
width:90%;
padding:10px;
border-radius:10px;
}
.title h1
{
text-align:center;
}
.container > div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px auto;
border-radius:10px;
}
.scroll
{
position:fixed;
color:#fff;
text-align:center;
background:#34D2E3;
padding:10px;
border-radius:5px;
right:0px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>
<span class="scroll">Scroll Down<br> Click</span>
<div class="container">
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3 class="scrollStop">Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
I found how to fix it using the ScrollTo plugin, I changed my code like so:
$("#a-politica-comercial").click(function() {
$('body').scrollTo($('#politica-comercial'), 800, {offset:-110});
});
I changed the offset to reduce some pixels in the final position, so now I have the div with the correct text!
Thanks anyways!