We Keep Coding

Alternative for scrolling on MacOS

All Macs have this option to show scrollbars but it is turned off by default.
I was wondering if there is a way to show scrollbars even if this option is turned off?
Or is there some sort of alternative (JS/jQuery) that I could use that just puts in an arrow and triggers some sort of scrolling function?
Basically something that would work to scroll without technically having a scrollbar.
Edit
As suggested I've started looking into the scrollTop() function in jQuery. Is there a way to get the current_position variable to get where the scrollbar should be?
$(document).ready(function(){
// var current_position = $("#container").get_current_position();
$("#up").bind("click", function(){
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>

There are libraries (e.g. https://www.jqueryscript.net/other/iOS-Style-Custom-Browser-Scrollbar-with-jQuery-CSS.html) which add custom scrollbars to pages by js, but you should really question this idea since you are changing the default usability behavior of the browser.
If you just want a button to scroll you can easily implement this e.g. with jquery. See: https://api.jquery.com/scrollTop/#scrollTop2
You can use scrollTop without parameter to get the current scroll position on the page, and if you need you can additional read out the pageheight ($(document).height();) and the viewport height ($(window).height();) in order to calculate the percentage of the page which is shown and where the actual position is relative to the content. See http://api.jquery.com/height/

The closest thing you can get to the scrollbars always being on is using CSS to style the scrollbar.
It won't work in all browsers though

This code does what I want it to do now:
$(document).ready(function(){
$("#up").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>
<br />

ADD/REMOVE class based on div/section change with JQuery

I have a fixed image and I need to animate it based on div/section changes
<div class="fixed">
<img src="some_image.jpg" class="child-fixed">
</div>
<section class="section" id="section-1">
//this is rotating section
</section>
<section class="section" id="section-2">
//this is flip section
</section>
and CSS something looks like this,
.fixed{
position:fixed;
margin:50% auto;
width:50px;
height:50px;
}
.fixed-child{
width:100%;
height:100%;
margin:0;
padding:0;
}
.section{
height:100vh;
width:100vw;
}
.rotate{
//some css totate styles here
}
.flip{
//some css flip styles here
}
and JQuery Code will be like this,
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.fixed-child').addClass( "rotate");
}elseif($(window).scrollTop() > 200){
$('.fixed-child').addClass( "flip");
}
});
});
Now I need to add rotate class when that image on section-1 and remove rotate class and add flip class when on section-2 with jquery,
I searched for that, I found some examples but using those examples I can add/remove class based on jquery scrollTop() method, but I want jquery detect that class and add corresponding classes when I scroll down and scroll up vice-versa.
I didn't write rotate and flip CSS code to reduce lines here. but those flip and rotate works.
Please help me to achieve this style!

From what I can gather from your question / comments you need something like Waypoints
Waypoints is the easiest way to trigger a function when you scroll to
an element.

I would also use waypoints for something like this, but as an alternative you can try doing something like:
$( document ).ready(function() {
var section_1 = $('#section-1'),
section_2 = $('#section-2');
$(window).scroll(function() {
var scroll_lvl = $(document).scrollTop(),
section_1_lvl = section_1.offset().top,
section_2_lvl = section_2.offset().top;
if(scroll_lvl >= section_1_lvl && scroll_lvl < section_2_lvl) {
$('.fixed-child').addClass( "rotate");
$('.fixed-child').removeClass( "flip");
} else if (scroll_lvl > section_1_lvl && scroll_lvl >= section_2_lvl) {
$('.fixed-child').addClass( "flip");
$('.fixed-child').removeClass( "rotate");
}
});
});

CSS based on viewport height

Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.

the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.
here's some code (merely for illustration purpose!)
$(window).scroll(function (event) {
var numOfButtons = 4;
var scroll = $(window).scrollTop();
var heightContainer = $(".container").height();
console.log('scrollPos', scroll);
if(scroll > heightContainer/ numOfButtons){
$(".header .button:nth-child(2)").addClass('act');
}else{
$(".header .button:nth-child(2)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*2){
$(".header .button:nth-child(3)").addClass('act');
}else{
$(".header .button:nth-child(3)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*3){
$(".header .button:nth-child(4)").addClass('act');
}else{
$(".header .button:nth-child(4)").removeClass('act');
}
});
.header{
height:50px;
background-color:blue;
color:white;
position:fixed;
top:0;
left:0;
width:100%
}
.button{
display:inline-block;
width:10px;
height:10px;
background-color:white;
border-radius:20px;
}
.button.act{
background-color:red;
}
h1{
margin-top:60px;
}
.container{
height:4000px;
background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Scroll demo</h1>
<div class="header">
<div class="button act"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="container"><div id="mydiv"></div>
</div>
</body>
</html>
enter link description here

you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.

Scrollable div with Variable Height

I want my sidebar to have a scrollable div. But it cant have a fixed height. How can I make it scrollable without setting a fixed height?
I tried with this, doesn't work properly.
.sidebar {width:300px; padding:10px; background:#efefef;height:100%; position:fixed}
.scroll-widget {overflow-y: scroll;padding:10px;margin:10px; background:#fffeee; height:inherit}
-
<div class=sidebar>
...
<div class=scroll-widget>
...
</div>
</div>
Demo: http://jsfiddle.net/YK47P
Jquery alternative is also fine with me. But i am a beginner, so please be kind

Somehow I was able to make it work using jQuery and taking help from here.
$(function () { // window load
$(window).resize(function () {
var sidebarH = $('.sidebar').height();
var scrollH = $('.top').height();
$('.scroll-widget').height(sidebarH - scrollH);
}).resize();
});
DEMO : http://jsfiddle.net/YK47P/40/

You just need to add overflow: scroll to your sidebar:
.sidebar {
width:300px;
padding:10px;
background:#efefef;
height:100%;
position:fixed;
overflow: scroll;
}
Updated Fiddle

Simulate this slider effect with jquery (instead of mootools) [Horizontal accordion effect]

I can use javascript and everything else, but before reinventing the wheel, I would like to know if there is already a similar plugin for jquery because I would like to use that framework and not mootools.
I don't have problems with money, expecially for a 5€ template, but really I would like to use jquery because I studied it and not mootools.
The template: http://www.globbersthemes.com/demo/upsilum/
EDIT 1: I changed the title for future references for people that know the correct name of this type of effect, thanks to everyone.

i always liked the jquery tools tabs for this - see http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

Here a plugin that might interest you : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

Here, I reinvented the wheel. But had looot of fun! :)
Tested in all modern browsers + IE 6-7-8
Instead of using 'title' images now you can use classic editable text!
Set desired 'start' tab
EDIT: added/fixed title support (rotaion for IE 6-7-8)
H - ACCORDION DEMO
The simple HTML:
<div id="acc">
<div class="title"><p class="button">Title 1</p></div>
<div class="cont">Cont 1</div>
<div class="title"><p class="button">Title 2</p></div>
<div class="cont">Cont 2</div>
<!-- more tabs here.... -->
</div>
The CSS style Ex:
.title{
cursor:pointer;
position:relative;
float:left;
width:20px;
height:200px;
background:#444;
color:#ccc;
padding:15px;
border-left:3px solid #aaa;
}
.cont{
position:relative;
float:left;
width:300px;
background:#999;
height:200px;
padding:15px;
}
.slide{
position:relative;
float:left;
overflow:hidden;
width:0px;
}
.active{
background:#cf5;
color:#444;
}
.button{
white-space:nowrap;
margin-top:180px;
font-size:20px;
line-height:25px;
text-align:left;
}
And the fun part: jQuery !
//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3; // set desired opened tab
var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.slide').stop().animate({width:0},700);
$(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');
if($.browser.msie && $.browser.version<="8.0"){
btn.css({
filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
width: titleH+'px',
position:'absolute',
marginTop:'0px'
});
}
One more thing- you'll just have to wrap the accordion into a positioned 'container' with set height and width to avoid accordion elements 'dance' on window resize.