Develop Reference

Fixed div on scroll and change state using CSS and sticky.js

I'm currently using sticky.js to fix a div to the top of my screen when I scroll. This works perfectly and I wouldn't want to change it but I would like to apply some css to the div to effect some change when it sticks.
I have tried implementing some JavaScript to the sticky script but it's still not working.
This is what I have now:
HTML
<div class="header"><div class="small_logo"><img src=""></div></div>
JavaScript
$(document).ready(function(){
$(".header").sticky({
topSpacing: 0,
success: function() {
$('.header').addClass("wide");
$('.small_logo').fadeIn("slow");
}
});
});
I'm sure it's just a simple javascript format issue but I just can't seem to find the right syntax.

Further to #Alex's point, the documentation does not describe any success option that you have used in your code.
The correct way would be to use the events that have been described in the documentation on github
I've given an example below.
$(document).ready(function(){
$(".header").sticky({topSpacing: 0});
$('.header').on('sticky-start', function() {
$(".small_logo img").fadeIn("slow");
});
$('.header').on('sticky-end', function() {
$(".small_logo img").fadeOut("slow");
});
});
.header {
background: #EEE;
height: 100px;
}
.small_logo img{
height: 100px;
display: none;
}
.body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
<div class="header">
<div class="small_logo">
<!-- <a href="/"> -->
<img src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
<!-- </a> -->
</div>
</div>
<div class="body"></div>

Did you see the brief documentation on GitHub?
According to the section about events you will need to do the following:
$('.header').on('sticky-start', function() { // your code });

You can use this simple example. Or this code:
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
$('.header').css({top: '0px'});
} else {
$('.header').css({top: '-50px'});
}
prevScrollpos = currentScrollPos;
}
</script>

Try this
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
$(window).scroll(function() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
})
.sticky {
position: fixed;
top: 0;
width: 100%
}
apply css to sticky class for effect

Hide sidebar when viewport is too small

I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}

You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>

You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event

Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }

How can i show/hide image with scrollTop

I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.

Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">

Modifying CSS width with Jquery according to screen width

Hey guys I'm running into some problems with the following code. What I'm trying to do is modify the width of a div via css according to the width of the screen.
<html>
<head>
<script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code. </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
if (screen.width = 1024) {
$(#something).css('width':'200px', 'background-color':'blue');
}
elseif (screen.width = 1366) {
$(#something).css('width':'300px', 'background-color':'blue');
}
}
</script>
</body>

You have a few problems.
The width should be checked with range
$(document).ready(function() {
if ($(window).width() >= 1366) {
$('#something').css({ 'width':'300px', 'background-color':'blue' });
} else if ($(window).width() >= 1024) {
$('#something').css({ 'width':'200px', 'background-color':'blue' });
}
});
Edit:
Combined with window.resize, then I think it'll behave exactly what you want.
But you can also consider using css media query to achieve responsive layout.
#media only screen and (min-width:1024px){
.my-style {
background-color: blue;
width: 200px;
}
}
#media only screen and (min-width:1366px){
.my-style {
background-color: blue;
width: 300px;
}
}

Try to use the window's resize event, by the way you are assigning the values inside the if statement,
$(document).ready(function() {
$(window).resize(function(){
var something = $('#something');
if ($(this).width() >= 1366) {
something .css({'width':'200px', 'background-color':'blue'});
}
else if ($(this).width() >= 1024) {
something.css({'width':'300px', 'background-color':'blue'});
}
});
});
Note: your code has lot of syntax errors like passing a undefined var as selector, error with else if etc.. and as well as i received a downvote for that.

jQuery: Showing a hidden div on page scroll

jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?

looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example

please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>