Develop Reference

Display specific div with scroll in wordpress

I've created a slider in the footer with shortcode (in a div id #oter) and I need to display none on load and display on onscroll.
Now I have this by plugin:
!function(e){e(document).ready(function(){var n=0;e(window).scroll(function(){var o=e(this).scrollTop();o>n?e("#oter").fadeOut(200):e("#oter").fadeIn(200),n=o})})}(jQuery);
Can I change to: hidden onload and display onscroll?
Can you help me?
Thanks!

I would hide this by default with CSS and then on scroll, add a new class which would then show it.
$(function() {
var footerslider = $("#oter");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
footerslider.addClass('show');
} else {
footerslider.removeClass("show");
}
});
});
UPDATE:
you are getting a console error... try updating the code to:
**please note that you will need to change the value inside the if statement so that the class gets added at the right scroll point.
jQuery(function($) {
var footerslider = $("#oter");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
footerslider.addClass('show');
} else {
footerslider.removeClass("show");
}
});
});
and add the following css to your stylesheet:
#oter {
display:none;
}
.show {
display:block !important;
}

How to make an element become fixed when 50px from the top of the screen

I have a html div element that scrolls with the page but I would like it to become fixed once it reaches 50px from the top of the screen...
How is this done?
My div id is #box
Thanks!
-Ina

If you want it to be fixed at the top of the page at some distance from the top, you can check the top offset of the element and change the class when it reach the distance you want.
Here is the jquery code for your reference
jQuery(document).scroll(function() {
var documentTop = jQuery(document).scrollTop();
console.log('this is current top of your document' + documentTop );
//box top is 891
if (documentTop > 841) {
//change the value of the css at this point
jQuery("#box").addClass("stayfix");
}
else
{
jQuery("#box").removeClass("stayfix");
}
});
You need to be more specific about what have you done so far. For eg, how did you make the div element to scrolls inside the page. using css or js/jquery animation features?That will help us to give more specific answer.
**Edited According to your fiddle.

They are right, this question is duplicate. Here is a code I made with answers from the forum.
var box_top = $("#box").offset().top;
$(window).scroll(function (event) {
if ($(window).scrollTop() >= (box_top - 50)) {
$("#box").css({position:"fixed",top:"50px"});
} else {
$("#box").css({position:"relative"});
}
});
Hope it helps anyway.
https://jsfiddle.net/ay54msd5/1/

Try something like this. It's a solution using jquery (hopefully not a problem) that checks the scrollHeight of the page every time the page scrolls. If the scrollHeight is greater than a certain threshold, the element becomes fixed. If not, the element is positioned relatively (but you can do whatever you want in that case.
$(document).ready(function() {
var navFixed = false;
var $box = $("#box");
var topHeight = 50;
$(document).scroll(function() {
if ($(document).scrollTop() >= topHeight && !navFixed) {
$box.css("position", "fixed");
navFixed = true;
}
else if ($(document).scrollTop() < topHeight && navFixed) {
$box.css("position", "relative");
navFixed = false;
}
});
});
You would have to write some additional CSS targeting the #box element that tells it what coordinates you'd like it to be fixed to.

stick div to screen if bottom of div and screen matches

Hello all I am working on a project where in a page I have to stick the div to screen (disable scrolling) when its bottom is at the bottom of screen. I have two divs in the page and both the divs are of variable height. I want to stick the div2 and scroll the div1.
<script>
var divheight
var scrolltop
var screenheight
if(divheight-scrolltop <= screenheight){
/* now stick the div wherever it is i can not
use fixed position as both the divs are floating and
fixing the position will make it to change the position*/ }
else { /*un stick the div*/ }
</script>
i dont know what to put in if and else please help me

Make a function which fire on scroll. The main aim of the function would be to see the difference between screen height and bottom of the div. Once the difference is less than or equal to zero modify the css position to fixed. This will help you
(function ($) {
$('.DIV1').scroll(function () {
var $this = $(this),
win_ht = $(window).height(),
div_ht = $this.height(),
div_bot = $this.offset().top + div_ht;
if (win_ht - div_bot <= 0) {
$this.css({
'position': 'fixed',
'bottom': '0'
})
}
});
})(jQuery);

Div stops at the top when scrolling

I am trying to make a div change class to fixed when it reach the top of the page.
I have this JavaScript code.
<script type="text/javascript">
$(function () {
var top = 200;
var y = $(this).scrollTop();
if (y >= top) {
// if so, add the fixed class
$('#kolonne-v').addClass('fixed');
} else {
// otherwise remove it
$('#kolonne-v').removeClass('fixed');
}
});
</script>
What am i doing wrong?

Demo jsFiddle
JS
$(function () {
var top = 200;
//this should be the offset of the top of your div
//which can be found by doing the following line
//var top = $("#kolonne-v").offset().top;
$(window).on('scroll', function () {
if (top <= $(window).scrollTop()) {
// if so, add the fixed class
$('#kolonne-v').addClass('fixed');
} else {
// otherwise remove it
$('#kolonne-v').removeClass('fixed');
}
})
});
Description
This uses the jquery .on('scroll', handler) method, documentation here. The basic principal is that on document.ready you set the scroll point when your div becomes fixed to the top. Then you setup an .on('scroll', handler) event that triggers whenever the window is scrolled in. If the user scrolls to your point you add the fixed CSS class.

Javascript: have div always remain at the top when it reaches the top edge of browser with jquery

how to have a div that always stay on the screen? Lets say i have a div at the left hand site. When the browser is scroll to the bottom, the div will remain there ONLY when its' top reaches the top edge of browser screen so that it will not be hidden. I am using jquery too.
Thank you.

here is a Good ScreenCast By RemySharp Regarding this Issue
http://jqueryfordesigners.com/fixed-floating-elements/
Demo Page :
http://static.jqueryfordesigners.com/demo/fixedfloat.html

You need to invoke .scrollTop() on the window and compare that with the offset top value from that DIV.
$(window).bind('scroll', function(e){
var $div = $('.top').
sTop = $(window).scrollTop();
if($div.offset().top <= sTop)
$div.css('top', sTop);
else
$div.css('top', '100px');
});
Whereas in this example, .top is the element which should stay at top.
Example: http://www.jsfiddle.net/2C6fB/8/

If you want it to always stay in thesame place, you can use the css property position: fixed; else you can use a combination of $(window).scroll() and .scrollTop(); to detect where your div is in relation to the screen and apply the right positioning.

/* PlugTrade.com - Sticky Top jQuery Plugin */
jQuery.fn.sticky_top = function () {
/* check for our hidden div.. create it if it doesn't exist */
if (!this.find("#sticky_top").length > 0)
this.append("<div id='sticky_top' style='display:none'>"+this.css('top')+"</div>");
var thisdiv = this;
$(window).bind('scroll', function(e){
var initval = thisdiv.find("#sticky_top").text();
var wintop = $(window).scrollTop();
var boxtop = initval.replace(/px/i, "");
if(wintop >= boxtop)
{
if ( $.browser.msie )
{
thisdiv.css('top', wintop+'px');
} else {
thisdiv.css('position', 'fixed');
thisdiv.css('top', '0');
}
// console.log(boxtop+':'+wintop);
/* thisdiv.css('top', wintop+'px'); */
}
else
{
thisdiv.css('position', 'absolute');
thisdiv.css('top', initval);
}
});
}
You can use like this:
$('#div1').sticky_top();

Keep your div position: fixed;