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

Resize Header On Scrolling

I'm trying to change the header size (which I named #headwrapper) and its background color when scrolling down. As you can see I need it to trigger the class .small when scrolling is > 145.
It is working only when I minimize the screen's width to 600px or less.
I have this problem since I had to change the very last line from height: '130px' to height: 'auto'; max-height: '1000px'. This in order to fully see the drop down menu triggered when the screens width is 600px. It was cutting in half with height 130px.
This is the script:
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 145) {
$("#pageheader, #headwrapper, #main-nav, .logos, #social, #main- logo").addClass("small");
}
else {
$("#pageheader, #headwrapper, #main-nav, .logos, #social, #main- logo").removeClass("small")
}
});
$(function(){
$('#headwrapper').data('size', 'big');
});
$(window).scroll(function(){
if ($(document).scrollTop() > 200) {
if ($('#headwrapper').data('size') == 'big') {
$('#headwrapper').data('size', 'small');
$('#headwrapper').stop().animate({
height:'75px'
}, 400);
}
} else {
if ($('#headwrapper').data('size') == 'small') {
$('#headwrapper').data('size', 'big');
$('#headwrapper').stop().animate({
height: 'auto';
max-height: '1000px'
}, 400);
}
}
});

You have an error in the animate object syntax. Replace the ; with , and quote them:
$('#headwrapper').stop().animate({
"height": 'auto', // Change ; to , as this is an object.
"max-height": '1000px'
}, 400);
And move everything inside the document's ready function:
$(function() {
$('#headwrapper').data('size','big');
$(window).scroll(function () {
var sc = $(window).scrollTop();
if (sc > 145) {
$("#pageheader,#headwrapper,#main-nav,.logos,#social,#main- logo").addClass("small");
}
else {
$("#pageheader,#headwrapper,#main-nav,.logos,#social,#main- logo").removeClass("small");
}
});
$(window).scroll(function() {
if($(document).scrollTop() > 200) {
if($('#headwrapper').data('size') == 'big') {
$('#headwrapper').data('size','small');
$('#headwrapper').stop().animate({
height:'75px'
},400);
}
}
else
{
if($('#headwrapper').data('size') == 'small') {
$('#headwrapper').data('size','big');
$('#headwrapper').stop().animate({
"height": 'auto',
"max-height": '1000px'
},400);
}
}
});
});

Sticky sidebar doesn't stop scrolling

I have a sticky sidebar on my page using the following script:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
The problem is that it should stop scrolling when it reaches the Middle Block Div. At the moment it doesn't stop scrolling and it pushes all the rest of the content down. Is there a way to fix this?
- DEMO -
Thank you.

You need to get the position of .middle-block and stop the sidebar from scrolling at that point (minus the height of the sidebar).
Change your jQuery function to:
$(function() {
var offset = $("#sidebar").offset();
var mbOffset = $(".middle-block").offset();
var mbPos = mbOffset.top - $("#sidebar").outerHeight() - 30; /*30px extra space*/
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top ) {
if( $(window).scrollTop() < mbPos ) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
Updated Pen

you have check if Sidebar has been moved to Middle Box, if so just stop the sidebar to animate.
like this :
$(function() {
var offset = $("#sidebar").offset();
var boxOffset = $(".middle-block").offset().top;
var sidebarHeight = parseInt($("#sidebar").outerHeight());
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
if(($(window).scrollTop()+sidebarHeight)<boxOffset){
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
check it live here: jsfiddle

how to set speed following sidebar

I am using a sidebar which automatically scrolls up and down when scrolling the site. I am using this script for it:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
But the automatically scrolling is a little bit fast. How can I set the speed of the up an down scrolling of the sidebar?

Assuming you're using jQuery, you can set the speed of the animation using "duration". It's a bit tricky to know if it works without the full HTML, but try this:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},{
duration: 1000
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
},{
duration: 5000
});
};
});
});
Source: http://api.jquery.com/animate/

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