According to this post i asked how to make a scroll method wich shows a element, scrolls to it and hide the element where i came from.
I improved that code, and it works.
But when I try to do this backwards, so from the second screen to the first screen again. Its not working. Its only scrolling to the top of the #content screen...
How does this come?
Here's a jsFiddle:
In order to achieve the desired effect you ll need to change up your markup/css and js logic a bit, as of now you are hiding the top element so once the scroll is done the bottom element's offset top = 0.
First change is to wrap your html in a <div> we ll give that div an id of #container.
Second of all we need to set the container's position to absolute so that we can slide it up and down on button click.
The css :
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#page1 {
height: 100%;
width: 100%;
}
#content {
height: 100%;
width: 100%;
overflow-y:scroll;
}
#exploreBtn {
height: 50px;
width: 50px;
background-color: red;
}
#goBack {
position: fixed;
bottom: 5%;
right: 5%;
height: 50px;
width: 50px;
background-color: purple;
}
#container {
position:absolute;
width:100%;
height:100%;
}
And finally we need to change up the js:
$(document).ready(function () {
$('#exploreBtn').on('click', function () {
showScrollHide('#content', '#page1');
});
$('#goBack').on('click', function () {
showScrollHide('#page1', '#content');
});
});
function showScrollHide(element, hide) {
var _ele = $(element),
_container = $('#container'),
_ele_top = _ele.offset().top;
if(_ele_top < 0)
_ele_top = 0;
console.log(_ele_top);
_ele.fadeIn(500, function () {
_container.stop().animate({
top: - _ele_top
}, 1000);
});
}
We get the desired effect, needs a bit of tweaking but you get the general picture.
Hope i helped.
The fiddle
put this in clck handler of the back to top button:
$('html').scrollTop(0);
Related
I have a div in html that I would like to stop when it hits a certain point above the bottom to line up with another element. It is fixed so it will scroll with the list of information I have but I want it to stop when the information stops. Don't know if that makes sense. I don't have very much experience with java or jquery but I would like it in jquery if possible so I don't have to reference an outside file.
This can be done by jQuery. As others have said take a look into it as well as Javascript.
Take a look at an example of an approach I made here: https://jsfiddle.net/ej83w0k9/
.fixed-header {
background-color: #fff;
width: 100%;
position: absolute;
top: 100px;
}
/*the fixed snippet, triggered by js*/
.fixedPos{
position: fixed;
left: 0;
right: 0;
width: 100%;
z-index: 100;
top: 0;
}
.fixed-header__nav li {
display: inline-block;
list-style-type: none;
}
jQuery here:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".fixed-header").addClass("fixedPos");
}
else{
$(".fixed-header").removeClass("fixedPos");
}
});
I've this html setup...
body
.top
.content
top is fixed fullscreen popup with some other content in it. However, while scrolling reaches to an end in the .top>ul the background item starts to scroll. Which is very nauseating and makes site all slowish on tablets.
On tablets, even when i add overflow hidden to body using jquery it doesn't prevents it for some reason from scrolling the background even sometimes when it's not reached end.
I want no scrolling of background page when popup is on top of the page. It's suppose to be a new slide.
What can i do preferable structure wise, then css, and lastly js.
Demo http://jsfiddle.net/techsin/0bv9g31k/
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
overflow: hidden;
}
.cont {
width: 400px;
margin: auto;
}
These functions freeze and unfreeze the body element, while allowing children to scroll if they have the appropriate overflow property:
function freeze() {
var top= window.scrollY;
document.body.style.overflow= 'hidden';
window.onscroll= function() {
window.scroll(0, top);
}
}
function unfreeze() {
document.body.style.overflow= '';
window.onscroll= null;
}
Working Fiddle
I believe you'll find a solution here, particularly the answer by Troy Alford: Prevent scrolling of parent element?
I suspect your question will be flagged as a duplicate.
I would have added this as a comment on your question but I don't have enough reputation points yet. I also don't feel good about trying to pass off any of the answers on that question as my own, so I'll simply answer with that link and hope it helps you.
I have some code that moves an image/element across the screen multiple times. The idea is that I'm trying to create a simple add bar with the image moving within the add bar, the element acting as the border of the bar/the actual bar.
With my current setup, the image moves outside of the element during animation despite being places within the /.
fiddle (may need to find new image) :http://jsfiddle.net/rwowf5j8/3/
<body onload="setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 300, 800, 500)}, 600)">
<div id="Advert">
<img src="JS.png" id="test">
</div>
</body>
<script>
function anim(elem,style,unit,from,to,time) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
elem.style[style] = (from+step*(to-from))+unit;
if( step == 1) clearInterval(timer);
},30);
elem.style[style] = from+unit;
}
</script>
</body>
#Advert {
background-color: white;
border-style: solid;
border-width: 2px;
width: 500px;
height: 225px;
left: 300px;
}
#test {
position: absolute;
left: 140px;
}
Giving your container relative positioning and hiding the overflowing elements will stop your issue:
#Advert {
background-color: white;
border-style: solid;
border-width: 2px;
width: 500px;
height: 225px;
overflow: hidden;
position: relative;
}
Because the container is now relative I've also removed the left: 300px.
http://jsfiddle.net/rwowf5j8/6/
http://jsfiddle.net/rwowf5j8/5/
add
#Advert {
position: relative;
/*left: 300px;*/
overflow: hidden;
}
Also, left: 300px won't work unless you add position: relative.
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>
<style>
body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky { background-color: #546bcb; height: 70px; }
#section { height: 1500px; }
#footer { background-color: #cb5454; height: 140px; }
</style>
Here is my code: http://jsfiddle.net/uaqh018d/
I want #sticky to stick to the top of the page after scrolling past #header. I also want it hidden until stuck. And then of course have it unstick+hide again after scrolling back up to #header.
How can I achieve this?
I would recommend adding a class to #sticky when it's ready to be fixed to the top of the screen, and then removing that class when you want to 'unstick' it. Then you can manipulate that class in CSS.
e.g. for a class fixed you'd put the following in your CSS:
#sticky {
display: none;
background-color: #546bcb;
height: 70px;
}
#sticky.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
And then your jQuery would look like this:
$(window).scroll(function() {
var distanceFromTop = $(this).scrollTop();
if (distanceFromTop >= $('#header').height()) {
$('#sticky').addClass('fixed');
} else {
$('#sticky').removeClass('fixed');
}
});
Here's an updated FIDDLE
I might also recommend some jQuery fade or slide effects (see the fiddle).
You can use position: fixed and in js detect when user scroll like this:
$(document).scroll(function() {
//detect when user scroll to top and set position to relative else sets position to fixed
$("#sticky").css({
"top": "0",
"position": $(this).scrollTop() > 140 ? "fixed" : "relative"
});
});
body {
margin: 0px;
background-color: #e3e3e3;
}
#header {
background-color: #cb5454;
height: 140px;
}
#sticky {
background-color: #546bcb;
height: 70px;
width: 100%;
position: fixed;
}
#section {
height: 1500px;
}
#footer {
background-color: #cb5454;
height: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>
References
.scroll()
In my case, the div I wanted to be sticky was inside of another div (ie. not stuck to the page, but in another fixed div on the side of the page). Here's my adaptation of #bowhart's answer to solving this problem given a React component (sticky_adapter.js):
module.exports.makeItSticky = function(thisReactComponent, parentScrollNode = window) {
const thisNode = $(ReactDOM.findDOMNode(thisReactComponent));
const position = thisNode.position();
// Uncomment for verbose logging
//console.log("Initial position: " + UIUtils.stringify(position));
const scrollContainer = $(parentScrollNode);
scrollContainer.scroll(() => {
const distanceFromTop = scrollContainer.scrollTop();
// Uncomment for verbose logging
//console.log("ScrollTop: " + distanceFromTop);
if (distanceFromTop > position.top) {
thisNode.addClass("stick-to-top");
} else {
thisNode.removeClass("stick-to-top");
}
});
};
Now, to make any React component sticky, I just add to the class:
componentDidMount() {
StickyAdapter.makeItSticky(this, ".some-other-div-which-is-the-container");
}
Finally, the css for the sticky class:
.stick-to-top {
display: block;
position: sticky;
top: 0;
z-index: 10;
}
Hey this is and old question but for new visitors I think u just need to add this css code to #sticky:
#sticky { position:sticky;top:0; }
and no need for javascript.
sticky toggles between relative and fixed, depending on the scroll position.
and don't forget that, the parent also should not have overflow property
This is my problem, I have a div and inside 2 divs, one is centered and the other one is fixed on the left, the problem is when I resize the screen the centered div overlaps the fixed one, what I wanted to do is detect when the centered div overlaps the other div and change its left value with javascript, but is not working, any ideas?
This is my design:
<div id="content-wrap">
<div id="content">
</div>
<div id="leftbar">
</div>
</div>
and the CSS:
#content-wrap
{
clear: both;
float: left;
width: 100%;
}
#content
{
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
width: 760px;
overflow: auto;
}
#leftbar
{
background-color: transparent;
width: 200px;
height: 470px;
position: absolute;
top: 185px;
left: 50px;
}
and this is the javascript code:
window.onload = function Centrar() {
var leftBar = $get("leftbar");
if (leftBar != null) {
var content = $get("content");
var size = leftBar.offsetLeft + leftBar.offsetWidth;
if (content.offsetLeft < size) {
content.style.left = size + 20 + 'px';
}
}
}
Thanks in advance for any help.
The easiest fix would be to apply a min-width to your #content-wrap container that prevented the overlap from occurring:
#content-wrap {
clear: both;
float: left;
width: 100%;
/* #leftbar width x 2 + #content width */
min-width: 1160px;
}
However, if you want to use Javascript, you'll need to attach the code to the window load and resize events:
$(window).bind('load resize', function() {
var content = $('#content');
var leftbar = $('#leftbar');
// get the right edge of the #leftbar
var leftbarEdge = leftbar.width() + leftbar.offset().left;
// check if an overlap has occured and adjust #content left position if yes
if (leftbarEdge > content.offset().left) {
content.css({
left: leftbarEdge - content.offset().left
});
}
});
The last change you'll need to apply to get this working is to set #content to position: relative in the CSS so it respects the left property you're setting with Javascript:
#content {
position: relative;
/* remaining css */
}
You can see it in action here.