Make a fixed div stay at a certain point when scrolling - javascript

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");
}
});

Related

how to prevent scrolling through fixed element

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.

How to make an interactive sidebar with jQuery and CSS3?

I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE

jQuery scroll back to top

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);

Position Fixed and Backface Visibility

I have three sectioning areas and within these I have a header element and a child item that is position fixed.
As the user scrolls I want the next section to go over the previous section including its fixed child.
I have this working in Chrome by using backface visibility:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
But in FF, the fixed items are no longer fixed. Take a look at the my jsfiddle http://jsfiddle.net/7KjXm/5/
Is this expected behaviour? Is there a cross browser solution? Or is JS the way to go?
Thanks....
I managed to solve the effect you were looking for. Unfortunately, it does not seem possible to do with only css (yet).
Here is my solution that uses jquery and modified css of the original page. I switched to numbers instead of colored elements and changed the sizes.
My javascript for fake floating elements (allows for them to be hidden when the view moves away):
$(function(){
elem = $('.fixeditem');
win = $(window);
wrap = $('<div>').css({
width: elem.width(),
height: elem.height()
});
elem.wrap(wrap);
win.scroll(function() {
elem.each(function(index, element){
element = $(element);
var offset = element.parent().offset().top;
element.css('top', win.scrollTop() + 40 - offset);
});
});
});
My custom css for this specific example:
html, body{
height: 100%;
}
.item {
min-height:100%;
background-color: white;
position: relative;
z-index: 1;
overflow: hidden;
}
.header {
position: relative;
background-color: green;
padding: 5px;
z-index: 2;
}
.fixeditem {
position: relative;
top: 10%;
left: 50%;
z-index: 0;
}
Colored update of code: http://jsfiddle.net/8F2Zc/4/
Hope this helps!

How can I create many divs on on top of the other using CSS/jQuery?

Basically, I want many(>25) divs to be displayed one on top of the other so that only one can be seen at a time. I have the jQuery UI draggable implemented, so once a div is dragged away, the next div is shown. What CSS do I need to make such a stack of divs? jQuery is also available if required.
Thanks!
Try this:
CSS
div.square {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px dashed purple;
position: absolute;
top: 30px;
left: 30px;
font-size: 50px;
line-height: 100px;
text-align: center;
color: white;
}
jQuery + jQueryUI
var count = 25;
var colors = ['red','green','blue','orange','yellow'];
while(count--) {
$('<div/>',{className:'square', text:count}).draggable().css({position:'absolute','z-index':count, text:count, backgroundColor:colors[count % 5]})
.appendTo('body');
}
EDIT:
I just noticed that for some reason in IE and Safari .draggable() overrides the absolute positioning with relative, so you need to set it back to absolute after you made it draggable.
Updated the example above.
http://jsfiddle.net/p9wWA/
You mean something like this?
#relative_container { position: relative; }
#relative_container div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#relative_container div.item_1 { z-index: 100; } /* Higher index means its more on top */

Categories

Resources