I have a Scrollable area and buttons < > to make it scroll.
I need to have those button's span inside the main div (spinAreaDiv) without they getting scrolled away.
Q: What am I missing? (fiddle here)
I tried having the span with float, then they are inside spinAreaDivbut get scrolled away...
HTML
<div id="spinAreaDiv">
<span id="leftclick" class="left"> < </span>
<span id="rightclick" class="right"> > </span>
<div class="spin-bullets">
zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
</div>
JS:
spinAreaDiv = document.getElementById('spinAreaDiv');
scrollEff = new Fx.Scroll(spinAreaDiv, {
wait: false,
duration: 1000,
offset: {
'x': 0,
'y': 0
},
transition: Fx.Transitions.Quad.easeInOut
});
thumbLeft = document.getElementById('leftclick');
thumbRight = document.getElementById('rightclick');
thumbLeft.addEvent("click", function () {
scrollEff.start((spinAreaDiv.getScroll().x) - 400, 0);
});
thumbRight.addEvent("click", function () {
scrollEff.start((spinAreaDiv.getScroll().x) + 400, 0);
});
CSS:
#spinAreaDiv {
width:500px;
margin-left:10%;
overflow:auto;
height:60px;
background-color:grey;
}
span {
margin-top:20px;
background-color:red;
z-index:100;
}
span.right {position:absolute;right:0px;}
span.left {position:absolute;left: 0;}
.spin-bullets {
width:10000px;
height:35px;
padding-top:10px;
top:0px;
background-color:#066;
}
(Using Mootools Fx.Scroll)
I'm not familiar with "MooTools", but you could change the left/right offset on the buttons during scroll:
spinAreaDiv.addEvent('scroll', function(ev){
thumbLeft.style.left = spinAreaDiv.getScroll().x + 'px';
thumbRight.style.right = (-spinAreaDiv.getScroll().x) + 'px';
});
(test)
Also, you need to position your spinArea:
#spinAreaDiv {
position: relative;
}
It might be a better idea to move your scroll content into another DIV with the scroll width and height, and put the buttons there. Example.
Your span buttons should be standing outside of #spinAreaDiv or take reference of position from a parent that do not scroll.
http://jsfiddle.net/53AMT/1/.
if you wrap your slider in :anther div;
#myslider {
position:relative;
z-index:1;
width:500px;
margin:auto;
}
They can lay over it though.
Related
I have a search bar which would like to display onto the header on scroll, a great example is like the one on this site: https://www.indiamart.com/
Approach 1 - A simple way to do this would be to detect a scroll & add and remove a class that contains display: none;
You can have an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
With the CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
top:0;
left:0;
display:none;
}
/*Use this class when you want your content to be shown after some scroll*/
.scrolled
{
display: block !important;
}
.parent {
/* something to ensure that the parent container is scrollable */
height: 200vh;
}
And the html would be -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content you want to show on scroll</div>
</div>
Here's a JSFiddle of the same - https://jsfiddle.net/kecnrh3g/
Approach 2 -
Another simple approach would be
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
with the html -
<div class="parent">
<div id ='searchBar'>Content you want to show on scroll</div>
</div>
and css
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
Here's a JSFiddle of the same - https://jsfiddle.net/0tkedcns/1/
From the same example, the idea is only to show/hide once user scroll the page using inline css display property, you can do the same or at least provide a code sample so we can help you!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
I have a fixed div(logo-fixed) that appears when scrolling 1070px from Top, but I don't want that, I like the div to appear when I scroll 50 pixels after another div(headerclass)
How can this be achieved?
9.
this is the code
(function($) {
$(".logo-fixed").css({"visibility": "hidden"});
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1070) {
$(".logo-fixed").css({"visibility": "visible"});
$('.logo-fixed').fadeIn(200);
} else {
$('.logo-fixed').hide(0);
}
});
})( jQuery );
.headerclass {
position:sticky;
top:0;
z-index:600;
}
.logo-fixed {
position:fixed;
top:0;
left:0;
width:224px;
height:120px;
z-index:1000;
background: url("#");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
<div class="headerclass"></div>
<div class="logo-fixed"></div>
You can get the position of the headerclass element with $(.headerclass').scrollTop() and then compare that to y in your conditional, instead of 1070.
Example:
if (y > 1070) {
gets replaced with
if (y > $(.headerclass').scrollTop() + 50 )
I use this code to show a fixed div after 800px of scrolling down
(function($){
$("#book-container").css({"visibility": "hidden"});
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$("#book-container").css({"visibility": "visible"});
$('#book-container').fadeIn(1000);
} else {
$('#book-container').fadeOut(100);
}
});
})( jQuery );
(function($) {
$(document).ready(function() {
$('.hide-me').on('click', function(){
$('.book-hotels').slideToggle(500);
$('.hide-me').hide(0).delay(510);
$('.hide-me').slideToggle(200);
});
});
})( jQuery );
#media (min-width:1710px) {#book-container {
position:fixed;
bottom:calc(50% - 200px);
right:0;
}
}
#media (min-width:1710px) {.hide-me {
float:right;
background:#cc0000;
padding:2px 6px 2px 6px;
cursor: pointer;
}
}
#media (min-width:1710px) {.book-hotels{
width:250px;
height:410px;
background:#fff;
padding:22px 0 0 0;
}
}
.hide-me span {
color:#fff;
font-size:12px;
font-family:"Roboto Slab";
font-weight:700;
}
#media (max-width:1710px) {.hide-me {
visibility:hidden;
}
}
#media (min-width:1710px) {.book-hotels h3 {
white-space: nowrap;
}
}
<div id="book-container">
<div class="hide-me"><span>Hide/Show</span></div>
<div class="book-hotels"><h3>Book a Hotel</h3>some content here..
</div>
</div>
It works but I have 2 problems.
When the page loads for the first time the div is visible even close to the top, I start to scroll and it disappears as it should and reappears again at 800px from the top, so how to make it not appear on load?
And, second, the script is in two pieces, I tried to merge into one but it doesn't work, I need a little help in that.
And finally, how can I add a function to disappear again the div before it reaches the footer?
Thank you
Fixed, by adding and remove a css rule to fixed div, visibility:hidden on load and visible after 800 pixels.
The site below uses a fixed background-image in each section, but how do I add fixed content (text, images) to each sections and keep the same scrolling effect?
http://tympanus.net/Blueprints/ScrollingLayout/
Have a look at my example to get a better idea of what I want:
http://jsfiddle.net/w919y0gb/
My try:
#wrapper {
position: relative;
height: 500px;
width: 500px;
overflow: scroll;
}
.section {
position: relative;
height: 100%;
width: 100%;
}
.content {
position: fixed;
}
#s1 {
background-color: #f00;
}
#s2 {
background-color: #0f0;
}
#s3 {
background-color: #00f;
}
#s1 .content {
}
#s2 .content {
margin-top: -400px;
}
#s3 .content {
margin-top: -800px;
}
<div id="wrapper">
<div class="section" id="s1">
<div class="content">hello1</div>
</div>
<div class="section" id="s2">
<div class="content">hello2</div>
</div>
<div class="section" id="s3">
<div class="content">hello3</div>
</div>
</div>
What I want:
The first section (red) should only display "hello1"
The second (green) only "hello2"
The third (blue) only "hello3"
something like this maybe? little hacky, but does the trick if you have set section heights:
$(document).ready(function(){
$('.div3').hide();
$('.div2').hide();
$('.div1').show();
$('#wrapper').scroll(function(){
console.log($('#wrapper').scrollTop());
if($('#wrapper').scrollTop() > 945){
$('.div3').show();
$('.div2').hide();
$('.div1').hide();
}
else if ($('#wrapper').scrollTop() > 465) {
$('.div3').hide();
$('.div2').show();
$('.div1').hide();
}
else {
$('.div3').hide();
$('.div2').hide();
$('.div1').show();
}
});
});
updated fiddle: http://jsfiddle.net/w919y0gb/3/
with this, you could also modify the placement of the "hello1/hello2/hello3" to be in the same position instead of in different places. or you could just have one div in which you modify/replace the text from hello1/hello2/hello3 depending on the scroll position. hope this helps!
That reference site is simply using a background-image set to fixed like so:
FIDDLE
UPDATE
Ok I understand. You would need to do something like this with jquery and $(window).scroll() function:
NEW FIDDLE
using positon: fixed just breaks the element out of the flow of the document and it can't be contained by a parent so you need to use absolute and position it based on the scrollTop to give the appearance that it's fixed.
You could also set the height of your webpage, and then make divs appear as you scroll up or down.
Heres a working example: http://jsfiddle.net/ZyKar/1738/
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 0 && y < 400) {
$('#s1').fadeIn();
$('#s3').fadeOut();
$('#s2').fadeOut();
} else if (y > 400 && y < 800) {
$('#s1').fadeOut();
$('#s2').fadeIn();
$('#s3').fadeOut();
}else if (y > 800) {
$('#s3').fadeIn();
$('#s2').fadeOut();
}
});
After you scroll a certain amount of pixels, divs will begin to appear and replace each other.
You may alter the value of y by setting the height of your body in css, as shown in the fiddle. You can then set the pixels conditions in the jQuery to whatever you like.
I've been trying to make two divs stick to the top of the page after the user scrolled past these divs. Both divs are positioned at the same hight. This is what I have been using from other stackoverflow answers:
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#blockleft').addClass('sticky')
else
$('#blockleft').removeClass('sticky');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
</head>
<body>
<div id="header"></div>
<div id="sticky-anchor"></div>
<div class="container">
<div id="blockleft"></div>
<div id="blockright"></div>
<div id="content"></div>
</div>
</body>
Css:
body {
margin: 0;
padding: 0;
}
#header {
height:200px;
background-color:#666;
}
#blockleft {
width:100px;
height:500px;
margin-top:10px;
background-color:#090;
float:left;
}
#blockright {
width:100px;
height:500px;
margin-top:10px;
background-color:#0F3;
float:right;
}
#content {
width:500px;
height:2000px;
background-color:#0CF;
margin:auto;
}
.container {
width:800px;
margin:auto;
}
.sticky {
position: fixed;
top: 0;
}
The script is working fine on one div, but when using the script twice it automatically moves the right div to the left and this one is not sticking to the top of the page.
I was hoping someone could help me out with this one.
Edit: Recreated the problem in a new document
Since the divs lose float property when we make it position:fixed, they both overlap with each other. In order to make them in their position, we need to apply right distance for the right div. To fix this, replace your script code as follows.
<script type="text/javascript">
function sticky_relocate() {
var containerWidth = $(".container").outerWidth(true);
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
{
$('#blockleft').addClass('sticky');
$('#blockright').addClass('sticky');
$('#blockright').css("right", (containerWidth-800)/2 + "px");
}
else
{
$('#blockleft').removeClass('sticky');
$('#blockright').removeClass('sticky');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
The code $('#blockright').css("right", (containerWidth-800)/2 + "px"); calculates the right distance value for the right div and adds css property right:XXXpx to that div while scrolling. The code var containerWidth = $(".container").outerWidth(true); fetches the width of the container div with its margin value (since margin is made auto, we need definite number for calculation)