I wanted to make a div, which is initially in a fixed position, to be scrollable after a certain div appears in the page, so I looked on the documentation of Jquery and I wrote this code:
$(window).scroll(function() {
var posscroll = $(".trigger").offset();
var pointscroll = posscroll.top - $(window).height();
if ($(window).scrollTop() >= pointscroll) {
$(".block").addClass("start-scrolling");
console.log("point of scroll reached");
} else {
if ($(".block").hasClass("start-scrolling")) {
$(".block").removeClass("start-scrolling");
}
}
});
.block {
position: fixed !important;
left: 50% !important;
height: 100px;
background-color: blue;
}
.start-scrolling {
position: absolute !important;
}
.trigger {
height: 50px;
width: 50px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">some content here</div>
other content in between
<div class="trigger">scroll from here</div>
I also made a simple Jsfiddle
unfortunate, I cannot make it work properly. when I reach the scrolling height my div just disappear suddenly instead of scrolling away up on the screen.
can you guys see what I'm doing wrong?
thank you!
It is not entirely clear what you want. But I believe that it is ...
In this case, the blue block ceases to be fixed as soon as its lower border touches the line that the yellow block touches with its upper border.
$(window).scroll(function(){
var posscroll = $(".trigger").offset();
var pointscroll = posscroll.top-$(".block").height();
if ($(window).scrollTop() >=pointscroll) {
$(".block").addClass("start-scrolling");
//console.log("point of scroll reached");
}else
{
if($(".block").hasClass( "start-scrolling")) {
$(".block").removeClass( "start-scrolling");
}
}
});
In this case, the blue block will disappear when the top border of the yellow block touches the center line of the blue block.
$(window).scroll(function(){
var posscroll = $(".trigger").offset();
var pointscroll = posscroll.top-($(".block").height())/2;
if ($(window).scrollTop() >=pointscroll) {
$(".block").addClass("start-scrolling");
//console.log("point of scroll reached");
}else
{
if($(".block").hasClass( "start-scrolling")) {
$(".block").removeClass( "start-scrolling");
}
}
});
Related
I am using jQuery to change a fixed div at the top of the screen top:0.
When the scroll gets to a certain point the class is changed and CSS is changed. Great.
However, I was looking for a better way. Since I am changing it when it reaches 30px away from the content block, doing what I did below doesn't work well since it is using a fixed height:
$(function(){
$(document).scroll(function() {
var x = $(this).scrollTop();
if(x > 2025) {
if($(window).width() > 950) {
$('.topFullWidthWhite').addClass('nonStick');
}
} else {
$('.topFullWidthWhite').removeClass('nonStick');
}
});
});
SO...
Is there a way of doing something more along the lines of...
if(x <= 20 from /* HTML ELEMENT */){
//DO WHATEVER HERE
}
If there is a way of doing this relative to other elements rather than document height that would be grand.
Thanks!
Try to make use of offset().top for that particular element after which you want to change the css
$(window).on("scroll", function() {
var two = $(".two").offset().top;
if ($(this).scrollTop() > two - 20) {
$(".two").addClass("reached");
} else {
$(".two").removeClass("reached");
}
})
body {
margin-bottom: 400px;
}
.one {
height: 150px;
background: green;
margin-bottom: 20px;
}
.two {
height: 100px;
background: blue;
}
.two.reached {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
On a webpage I have multiple sections. In one of this sections I show lots of content blocks. These blocks can be filtered via a panel that floats on the right side.
Currently this floating panel is visible on all the sections of the webpage but I want it to only be visible within the section that I assign it to.
Ideally I would want it to have it stuck in the top right corner of the section on page load. Then when the user gets to the section it needs to keep scrolling with the user until it reaches the end then it needs to stay there.
When the user is finished on the page and scrolls back upwards it needs to do the same as above only in reverse order.
What needs to be done
Make it only visible within the section (assigning a specific section)
Make it stuck in the top right corner on page load
Disallow continuing to the next section after reaching the end of the assigned section.
jsFiddle
https://jsfiddle.net/nfuL86hg/
HTML:
<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>
JS:
(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
$("#scroller").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
});
})(jQuery);
CSS:
#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}
Thanks everyone for helping.
PS: If you know a better title please post it in the comment area. At the moment I could not think of a better one.
here is one demo
https://jsfiddle.net/nfuL86hg/2/
(function ($) {
$(document).ready(function() {
$(window).scroll(function(e){
if(getIsInArea()){
console.log('animate');
$("#scroller").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"
}, 100 );
}
});
function getIsInArea(){
var w = $(window).scrollTop();
var p = $('#section-bbb').position();
var top = p.top;
var down = top+$('#section-bbb').innerHeight();
if(w>=top && w<=down) {
return true
}
return false;
}
});
})(jQuery);
Expect goes near you need it
Another solution wihtout the animation, in case you want it simpler.
Check it on this JSFiddle.
HTML
<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>
CSS
body {
padding: 0;
margin: 0;
}
#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}
JavaScript
(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
if ($(window).scrollTop() > $('#section-bbb').offset().top) {
if ($(window).scrollTop() < $('#section-bbb').offset().top + $('#section-bbb').height() - 100 - $('#scroller').height() ){
$('#scroller').css({"position":"fixed", "top":"50px", "bottom":"auto"});
} else {
$('#scroller').css({"position":"absolute", "top":"auto", "bottom":"50px"});
}
} else {
$('#scroller').css({"position":"absolute", "top":"50px", "bottom":""});
}
});
});
})(jQuery);
In Javascript it checks if the scroll top of the window is in the section-bbb div and if it is, it changes the css of the scroller div to have position: fixed. If the scroll top of the window is below the section-bbb div, it changes back the css of the scroller div to have position: absolute and be on the bottom of the section-bbb div (top:auto, bottom:50px). If the scroll top of the window is above the section-bbb div, it changes the css of the scroller div to have position: absolute and be on the top of the section-bbb div (top:50px, bottom:auto).
So i hope my question is clear enought ! I have a div at the top of my page and i'd like that div to move at the bottom when i scroll and hit the end of the page, well i think you get the idea !
If anyone as an idea, i'm taking it ;)
Try to use scroll event with animate() method, and use a flag scroll to make sure the div will be moved just one time :
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
Hope that will give you an idea.
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
html, body { height: 500px; }
#my-div {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100px;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>
You can detect when user scroll to the bottom of the page and then transition top property from 0 to the height of the window minus height of that element.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('div').css({
top: $(window).height() - $('div').height()
});
}
});
CODEPEN
I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
I'm trying to build a right box who follows the user scrolling:
CSS:
.clearfix:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
.wrapper {
border: 1px solid black;
}
.column {
float: left;
border: 1px solid red;
}
.relative {
position: relative;
margin-top: 0px;
}
HTML:
<div class="wrapper clearfix">
<div class="column">
small or big text
</div>
<div class="column">
<div class="dmap relative">a</div>
<span>some other crazy stuff</span>
</div>
</div>
Javascript:
referencey = $(".dmap").offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= referencey) {
$(".dmap").css("margin-top", y - referencey)
} else {
$(".dmap").css("margin-top", 0);
}
});
The code works just fine. The columns sizes are irrelevant, because all I do is change the margin-top, it means the columns and wrapper always gets a new size. The downside of the code is little smalls jumps while the user is scrolling.
An alternative to avoid the small jumps while scrolling is not to change the margin-top, but change the position of the box to fixed after y >= referencey. The downside of the solution is a very buggy behavior relative to the columns sizes, because when I change the class to fixed, it's does not occupy space inside the right column anymore, if the left column is smaller, a whole set of new bugs appear.
I came up with a solution that don't fix the problem, but work around it. What I have done is to scroll the box after the user stop scrolling. A different effect but no little jumps (and it looks cool too).
var scrolly = $(".dmap").offset().top;
var scroll = false;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (scroll) {
clearTimeout(scroll);
}
scroll = setTimeout(function () {
$(".dmap").animate(
{ marginTop: (y >= scrolly ? y - scrolly : 0) },
{ queue: false, duration: 200 }
);
}, 100);
});
It one simple line; position: fixed;
This means that the object is fixed to the page so it follows when you scroll.