We Keep Coding

how to run javascript when screen size over certain width size?

I want to run certain javascript only when the window width is over 1024.
The script is long. I've tried to combine them with
if ($(window).width() >= 1024
but it still not working.
Can someone help me?
This is the script I want to run when the width is over 1024 :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(window).load(function() {
$(window).on("scroll resize", function() {
var pos = $('#fixPlace').offset();
$('.post').each(function() {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.feature__description').html();
var oldDescr = $("#fixPlace").html();
$('#fixPlace').html(newDescr);
if (newDescr !== oldDescr) {
$("#fixPlace").css('opacity', 0.4).animate({ 'opacity': '1', }, 200);
return;
}
}
});
});
$(document).ready(function() {
$(window).trigger('scroll');
});
});
let fixPlace = '#fixPlace';
let scrollStart = null;
let scrollEnd = null;
let floatBoxTop = 0.25 * $(window).height();
$(document).ready(function() {
scrollStart = $('#fixPlace').offset().top;
scrollEnd = $('.transition').offset().top - 680;
})
$(window).scroll(scroll)
function scroll() {
let scrollTop = $(document).scrollTop() + floatBoxTop;
scrollTop = Math.min(scrollEnd, Math.max(scrollTop, scrollStart))
if (scrollTop === scrollStart || scrollEnd === scrollTop) {
$(fixPlace).css({
position: 'absolute',
top: scrollTop
});
} else {
$(fixPlace).css({
position: 'fixed',
top: floatBoxTop
});
}
}

Scroll button to position when page scroll hits position

So basically... as I scroll down a page, when it hits a certain point on the scroll, I want my button to scroll down the page to the bottom. Here is what I have so far.
I know the detection of when to do the action works because un-commenting out the alert works at the correct position. I need help with the button being scrolled down.
$(document).ready(function() {
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 1000) {
//alert("hit part of page i want... works!");
$('#<%= btnFinish.ClientID %>').animate({ scrollTop: $(document).height() }, 500);
}
});
EDIT: HOW TO DO:
$(window).scroll(function() {
var d;
var i;
var top = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height()
var obj = $('#<%= btnFinish.ClientID %>');
var bottom = obj.position().top + obj.height();
if (top + windowHeight == docHeight && bottom <= 800) {
d = 0;
for(i = 410; i>=85; i=i-.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
} else if (top == 0 && bottom >= 801) {
d = 0;
for(i = 85; i<=410; i=i+.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
}
});

You can fix its position with CSS style.
style="position: fixed; bottom: 10px; right: 10px;"
And if you want to make it display after specific scroll then just show/hide that button after some scroll as per your convenient.

You can use CSS transition:
$( document ).ready( function () {
$( window ).scroll( function () {
var height = $( window ).scrollTop();
if ( height < 500 ) {}
if ( height > 1000 ) {
$('#test').css({ bottom: 10, right: 10 });
} else {
$('#test').css({ bottom: 170, right: 10 });
}
} );
} );
body {
position: relative;
height: 2000px
}
#test {
position: fixed;
bottom: 170px;
right: 10px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="test">Button</button>

$(window).scroll(function() {
var d;
var i;
var top = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height()
var obj = $('#<%= btnFinish.ClientID %>');
var bottom = obj.position().top + obj.height();
if (top + windowHeight == docHeight && bottom <= 800) {
d = 0;
for(i = 410; i>=85; i=i-.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
} else if (top == 0 && bottom >= 801) {
d = 0;
for(i = 85; i<=410; i=i+.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
}
});

Div follow as you scroll on desktops screen and is fixe on mobile screen

I want a div follow as you scroll when you are on a screen wider than 991. On a screen size smaller i want the div fixe. And i want the javascript code refresh every time someone load or resize the page.
Here my code (it's not dry...).
My problem is when i resize the window (desktop screen -> mobile screen -> desktop screen...):
1 - on mobile screen i can't go at the bottom of the page
2 - on desktop screen i have a problem when i scroll the page
//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;
$(window).on("resize load", function() {
if ($(window).width() > 991) {
smallscreen = false;
}
else {
smallscreen = true;
};
//if it's not a small screen activate the scrolling
if (smallscreen == false) {
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(window);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
}
else {
$this.css({
position: 'fixed',
top: 180
});
};
});
};
$('#checkout_validation').followTo(400);
}
else {
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(window);
$window.on("resize scroll load", function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'initial',
width: '100%',
top: 0
});
}
else {
$this.css({
position: 'initial',
width: '100%',
top: 0
});
};
});
};
$('#checkout_validation').followTo(0);
};
});

Here's my working code. Thanks you #iMatoria for having dried it.
//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(window);
$window.on("resize scroll", function(e) {
function positionByScreen(positionForBiggerScreen, topOffsetForBiggerScreen) {
if (smallscreen == false) {
//alert('bigcreen scroll end');
$this.css({
position: positionForBiggerScreen,
top: topOffsetForBiggerScreen
});
} else {
//alert('smallscreen no scroll end ');
$this.css({
position: 'inherit',
top: 0
});
}
}
if ($window.scrollTop() > pos) {
positionByScreen("absolute", pos);
} else {
positionByScreen("fixed", 180);
};
});
};
$(window).on("resize load", function() {
smallscreen = !($(window).width() > 991);
//if it's not a small screen activate the scrolling
$('#checkout_validation').followTo(smallscreen ? 0 : 400);
//var d = document.getElementById("checkout_validation");
//d.className += " otherclass";
});

Fixed 100% height sidebar that after scroll stick to footer

So I'm trying to get my fixed 100% height sidebar when atteint the top of the footer go from fixed position to absolute position withe specific given height and stick to footer.
HTML Structure
<header ng-include="'app/views/partials/application-specific/top-navbar.html'"></header>
<section ng-include="'app/views/partials/user/top-back-user.html'"></section>
<div class="content">
<aside class="aside sidebar" id="stick" ng-include="'app/views/partials/user/sidebar-user.html'" style="max-height: 100% !important;"></aside>
<div class="content-wrapper" id="content-wrapper" ui-view>
</div>
</div>
<footer class="footer" id="footer" ng-include="'app/views/partials/user/footer.html'"style="padding-bottom: 0px; height:300px;" ></footer>
1- the first javascript code serve to fix the sidebar to top after 150px scroll.
var windowWidth = $(window).width();
if (windowWidth > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#menu1-fixed').addClass('fixed1');
$('.fado').slideUp();
$('.fado').slideUp(600);
} else {
$('#menu1-fixed').removeClass('fixed1');
$('.fado').slideDown();
$('.fado').slideDown(600);
}
})
};
css
.fixed1 {
position:fixed !important; top: 0em !important; margin-top: 3.4em !important;
}
2- The second code is after scroll 900px from top replace fixed position with absolute and a specific height. In that case i wannt to change 900px to detect the top of the footer and after change class to absolute.
var windowWidth = $(window).width();
if (windowWidth > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > 900) {
$('#menu1-fixed').addClass('main-sidebar2');
} else {
$('#menu1-fixed').removeClass('main-sidebar2');
}
})
};
css
.main-sidebar2 {
position: absolute !important;
height:600px !important;
min-height: 580px !important;
top:1000px !important;
}

please try with below example it will work fine.
$( document ).ready(function() {
var e = $("#stick");
var lastScrollTop = 0;
var firstOffset = e.offset().top;
var lastA = e.offset().top;
var isFixed = false;
$(window).scroll(function(event){
if (isFixed) {
return;
}
var a = e.offset().top;
var b = e.height();
var c = $(window).height();
var d = $(window).scrollTop();
if (b <= c - a) {
e.css({position: "fixed"});
isFixed = true;
return;
}
if (d > lastScrollTop){ // scroll down
if (e.css("position") != "fixed" && c + d >= a + b) {
e.css({position: "fixed", bottom: 0, top: "auto"});
}
if (a - d >= firstOffset) {
e.css({position: "absolute", bottom: "auto", top: lastA});
}
} else { // scroll up
if (a - d >= firstOffset) {
if (e.css("position") != "fixed") {
e.css({position: "fixed", bottom: "auto", top: firstOffset});
}
} else {
if (e.css("position") != "absolute") {
e.css({position: "absolute", bottom: "auto", top: lastA});
}
}
}
lastScrollTop = d;
lastA = a;
});
}
});

Javascript Menu Jumping from bottom to top instead of Scrolling

I am trying to make a menu that sticks to the bottom of the page and then to the top after scrolling. The only problem is that instead of scrolling with the page, the menu stays in the same place and then jumps to the top right at the end.
I am running stellar.js on the site also and I wondered if this was conflicting but I removed the calling javascript and the problem persisted so I put it back.
The site URL is www.percolatedpropaganda.co.uk
I am stumped and any help would be much appreciated!
Javascript
$(document).ready(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#menu').outerHeight(true);
$('#menu').css({'top': stickToBot + 'px'});
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot ) {
$('#menu').css({'position':'fixed','top' :'0px'});
} else {
$('#menu').css({'position':'absolute','top': stickToBot +'px'});
}
});
});
CSS
#menu {
font-size: 85%;
position: relative;
float: left;
}

Why don't you try this:
Javascript:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
$('#menu').css({bottom: '', top :'0px'});
} else {
$('#menu').css({top: '', bottom: '0px'});
}
});
});
CSS:
#menu {
position: fixed;
bottom: 0;
}
Check it out: Example
UPDATE:
If you want the movement to be animated use this instead:
Javascript:
$(document).ready(function() {
var menu = $('#menu');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css('top', stickToBot + 'px');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
menu.stop().animate({top :'0px'});
} else {
menu.stop().animate({top: stickToBot + 'px'});
}
});
});
CSS:
#menu {
position: fixed;
}
Have a look: Example
UPDATE 2:
If you want it like cwtchcamping.co.uk... have a look at this:
Javascript:
$(document).ready(function() {
var menu = $('#menu');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css('top', stickToBot + 'px');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if (scrollVal > stickToBot) {
menu.css({top: '0px', position: 'fixed'});
}
else {
menu.css({top: stickToBot + 'px', position: 'absolute'});
}
});
});
CSS:
#menu {
position: absolute;
}
Example: JSFiddle