How to make an HTML element that is initially 'fixed' then when we scroll the web page down or more specifically through the element, the element will move to the side or wherever we specify. And of course when we scroll the web page back up and pass the element, it will return to normal.
Please help if there is, I ask for an article or explanation of what to use and an example of the source code.
You can use sticky for that: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
I'm using jQuery for something similar on my app. The following code will add the class of 'scroll-active' to the 'nav' when scrolled 10px, and removes it when there is nothing scrolled.
$(function () {
$(window).on('scroll', function () {
if ( $(window).scrollTop() > 10 ) {
$('nav').addClass('scroll-active');
} else {
$('nav').removeClass('scroll-active',);
}
});
});
I think you can use this and add the necessary css to it on your added class to have it on the right side.
You'll probably need javascript for that, this might work for you if you don't want to use jQuery.
<div id="container">
some content
</div>
and some javascript to define add a class:
window.addEventListener('scroll', function(e) {
container = document.getElementById('container');
// The 0 could be a larger threshold if you want to move it after scrolling a bit
container.classList.toggle('scrolling', window.scrollY > 0);
});
and then define your CSS:
#container {
/* style when not scrolling */
}
#container.scrolling {
/* style when scrolling */
position: fixed;
}
here is a working jsfiddle: https://jsfiddle.net/96xvotpc/2/
Related
I am looking to make a webpage with the same concept as enter link description here that displays relative distance between planets. I can't tell if this is a premade jquery plugin or custom built. TIA
You need mainly two things:
You need window.scrollY to get your current scroll. Note that Y is for vertical. If you want horizontal like them, use scrollX.
You need to add an event listener so you refresh the values when scrolling. The easiest way: window.onscroll
Then, it's up to you how to implement it, but something along these lines:
window.onscroll = function() {
var px = document.getElementById('px');
px.innerText = window.scrollY;
}
main {
height: 5000px;
}
#counter {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 2em;
border: 1px solid #000;
}
<div id="counter">
You are <span id="px">0</span>px down!
</div>
<main>
Keep scrolling down!
</main>
You can check out this libraries ;
http://prinzhorn.github.io/skrollr/
and
https://magic.io/
Look for examples, you can do lots of things with them.
You can listen for window 'scroll' change event.
window.addEventListener('scroll',function(event){
console.log(window.scrollY); // for vertical scrolling
console.log(window.scrollX); // for horizontal scrolling
})
I have an anchor tag as follows:
A Guide
It navigates to a section that has the id 'map_4D85448A3D4C4180A02BD6FC387ABC45'. The jumptosection function is as follows:
function jumptosection(id) {
var target = document.getElementById(id);
if(document.all){
document.documentElement.scrollTop = target.offsetTop;
}else{
var top = 0;
do {
top += target.offsetTop || 0;
target = target.offsetParent;
} while(target);
document.body.scrollTop = top ;
}
//$('#article').css.paddingTop = '55px';
return false;
But even if I write nothing in this function, the behaviour is still the same. The problem is that I have a header strip of 92px that hides some part of the section when I click on the given anchor. How do I make it scroll to the given section while adding some pixels to escape the header?
While the chosen answer serves the purpose, we now have explicit CSS property for this, called scroll-margin.
Basically, you avoid any trickery by adding unnecessary elements - this margin is just calculated when you navigate via anchor tag (or if you have set up native css scroll snapping - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts).
Using this with CSS variables is really useful. Here's an example if you have a fixed / sticky header:
/* Set the header variable */
--h-header: 50px;
/* Set the scroll margin top on all anchor elements by using .anchor class */
/* Note: I'm setting plus 2.5em so the element has some breathing room on the top */
.anchor {
scroll-margin-top: calc(var(--h-header) + 2.5em);
}
MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin
CSS-Tricks guide: https://css-tricks.com/almanac/properties/s/scroll-margin/
It is possible. I would do it without javascript, so it works for all. Even no changes on you JS are needed.
You just need to create an empty element above the element you want to scroll to. The CSS does the magic. It creates a hidden box in the height of you offset:
HTML:
<span class="anchor" id="map_4D85448A3D4C4180A02BD6FC387ABC45"></span>
<h1>Element to scroll to</h1>
CSS:
.anchor {
display: block;
height: 92px;
margin-top: -92px;
visibility: hidden;
}
See a working demo here:
https://jsfiddle.net/eczxm1rs/1/
I'm trying to get a button that's found in the right rail column on my test page (in desktop view) to take up the entire footer of the page in mobile view.
This is the css and js code that I am using:
#media screen and (max-width: 768px) {
#register_text_container {
position: fixed;
bottom: 0px;
}
}
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#register_text_container", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
The js code is not mine, it is one I found searching stackoverflow and its been working great, I just can't seem to figure out how to get it fill the page. I have tried using width: 100% but that didn't work.
The container that I'm calling in my CSS code is one I do not have direct access to, its built into the CMS and pops up as a button.
when I inspect the Register button to look at the html code to see what I should be calling in my css document this is what I found:
<div class="entry-page-button-container" id="register_link_container">
<div class="manageable-content" data-container="edit_register_text_container">
<a class="entry-text-link secondary-step step-button" id="register_text_container" href="">Register</a>
</div>
</div>
I've tried it on each class and id and so far still unable to get the register button to take up the full width of the page.
Appreciate any help I can get.
Thanks!
Test Page
You have a width: 250px !important on this link .entry-text-link secondary-step step-button
Change it to width:100%; (and remove the !important, it is not needed ).
Then add left:0; and right:0; in this fixed element .entry-page-button-container
And it should works properly.
just set the width of the button element to 100%. This will make it take up the full width of the button's parent container.
Set it using the style attribute like so:
<div>
<button style="width: 100%">Press this full width button!</button>
</div>
this will make the button go to the full width of the parent div element
You have to remove width : 250px !important on <a> element and add this on fixed element.
width: 100%;
left: 0;
bottom: -10px;
I'm building a web app for which I disable the bounce back effect of OS X and iOS, but still need the user to be able to scroll.
So I ended up using this CSS trick to achieve that:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
It works just fine (although not quite as smoothly as without the trick — any suggestions?). Given that I disable the scroll on the html, I know that I've got to bind the .scroll() to the body:
$('body').scroll(function() {
doSomething();
});
But the thing is, I need to detect how much the user has scrolled within the body element, and I can't seem to figure out how to do just that.
var doSomething = function(){
var scrollTop = $('body').offset().top; // returns 0.
var scrollTop = $('body').scrollTop(); // returns 0 as well.
};
Can anyone help me out? Thanks!
Easiest solution:
The easiest thing to do is just to check the position of the top element inside the body:
Here's the codepen
$(function(){
$('body').scroll(function(){
// Substitute your first element for 'header.main'
console.log( $('header.main').position().top );
});
});
Another method:
Or you can add a wrapper element like below:
I was able to get a correct offset by adding another element wrapper inside the body and checking the position of that.
Here's the codepen
<body>
<div id="offset">
<!-- all of your content in the "offset" wrapper -->
</div>
</body>
JS:
$(function(){
$('body').scroll(function(){
console.log( $('#offset').position().top );
});
});
Update: I tested this in OSX, and it looks like this does indeed suppress the bounce effect AND give the correct scroll offset number.
I've got some javascript which handles opening modal popups on my website, and it also sets the overflow-y property on the <html> element to hidden. In Chrome and IE this works as expected - the scrollbar hides, and the page behind the modal popup remains in the same scroll position. When the popup is closed, overflow-y is set to scroll and the page is in the same state and position as before.
However in Firefox, as soon as overflow-y is changed to hidden the page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.
The problem can be seen on this jsfiddle
Is there any solution for this behaviour?
Don't use overflow: hidden on html, only on body.
I had the same problem but fixed it by removing html.
Instead :
$('body, html').css('overflow', 'hidden');
Do :
$('body').css('overflow', 'hidden');
I had the same issue
after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to
HTML {
overflow-y: scroll;
}
you can fix this by setting it to
HTML {
overflow-y: initial;
}
If you don't want to touch reset CSS or just comment it
plugin and code is absolutely fine
change modal position from absolute to fixed:
#mymodal {
position: fixed
}
There are lots of bugs in the different browsers and the functionality is all over the place so be careful modifying styles on body and html tags.
To solve this issue i had to wrap the body's content into its own element and apply the scrolling restriction on it:
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
This is the only way i've been able to get this working consistently across different browsers and devices.
I just encountered this problem. My fix was
/**
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0
* #type int
*/
var scrollTop;
$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) {
// Stuff...
scrollTop = $('body').scrollTop() || $('html').scrollTop();
$('body,html').css({overflow: 'hidden'});
});
$(selector).unbind('click.closemenu').on('click.closemenu', function (e) {
// Stuff
$('body,html').css({overflow: 'initial'}).scrollTop(scrollTop);
});
This however doesn't solve the problem of what happens if a user resize the viewport.
Edit: I just saw your code and you used a link with href="#". That is most likely the cause. I'd suggest removing the href property or use a button for it.
You should consider that this might not be caused by the css itself.
In my case I opened my popup with a link: open popup
So what actually caused the jump to the top was the "#" in the href property of the link.
I removed it and added a noscroll class to my html and body tag:
.noscroll {
overflow: hidden;
}
Keeping the body height 100% from the beginning solved the problem for me.
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
Use body tag instead of html.
JS Fiddle :- http://jsfiddle.net/SBLgJ/6/
JS Change:-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
CSS Change:-
body {
overflow-y:scroll;
}
There is a reported issue for such behavior. (https://github.com/necolas/normalize.css/issues/71)