Develop Reference

Step component with arrow button

I am trying to build step component with arrow button to scroll through left and right using bulma, angularjs, jquery. My requirement is,
only five elements will be seen inside the visible part of the component.
As soon as the element moves in the left arrow it fade out.
As soon as the element moves out the left arrow it fade in.
As soon as the element moves in the right arrow it fade out.
As soon as the element moves out the right arrow it fade in.
Also, same with the mouse scroll
https://codepen.io/singhrhi/pen/ZEYNWQM
;'use strict';
angular.module("app.fcrs")
.controller("ProjectProgressWorkflowViewController", ["$scope",function($scope) {
angular.extend($scope, {
test: function() {
// console.log("TEEEST");
},
test1: function(){
// console.dir($('.left-paddle').position().left);
// $('.menu').animate({"scrollLeft": '+=190px'}, 300 );
$('.menu').animate({"scrollLeft": '+=200px'}, 300 );
// $('.menu').on('scroll', function() {
// // console.log($(this))
// // console.log($(this.children[0]))
// $scope.oscrl($(this.children));
// });
},
test2: function(){
// console.dir($('.right-paddle').position().left);
$('.menu').animate({"scrollLeft": '-=200px'}, 300 );
// $('.menu').on('scroll', function() {
// // console.log($(this.children))
// $scope.oscrl($(this.children));
// });
}
});
}]);
#media screen and (min-width: 769px), print{
.steps.is-small:not(.is-vertical) .steps-segment:not(:last-child):after {
height: .16em;
}
}
.steps.is-hollow .steps-marker, .steps-marker.is-hollow {
border: .2em solid #23d160;
}
.steps-marker{
margin-right: 11rem;
}
.TeSEST{
background: #23d160;
width:90px;
position: absolute;
top: 1px;
}
.TeST{
background: repeating-linear-gradient(90deg, #dbdbdb, #dbdbdb 10px, transparent 10px, transparent 20px);
width:84px;
position: absolute;
right:0px;
top:2px;
}
#media screen and (min-width: 769px), print {
.steps.is-small:not(.is-vertical).has-content-centered .steps-segment:not(:last-child):after {
left: 55%;
right: -45%;
}
}
.menu-wrapper {
padding:4px;
position: relative;
max-width: 1100px;
height: 100px; // hide the scroll bar
margin: 9em;
overflow-x: hidden;
overflow-y: hidden;
}
.menu{
height: 120px; // hide the scroll bar
box-sizing: border-box;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
opacity:1;
}
.paddles {
}
.paddle {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
width: 3em;
}
.left-paddle {
left: 0em;
}
.right-paddle {
right: 0em;
}
.hidden {
display: none;
}
<div ng-controller="ProjectProgressWorkflowViewController">
<div class="menu-wrapper">
<ul class="steps is-small has-content-centered menu">
<li class="steps-segment item" id="dd">
<hr class="TeSEST"></hr>
<a href="#" class="steps-marker has-text-weight-normal" id="ddd">
1
</a>
<div class="steps-content" style="width:16em">
<div>Project</div>
<div>Establishment</div>
</div>
</li>
<li class="steps-segment item">
2
<div class="steps-content" style="width:16em">
<div>Functional Design</div>
<div>&</div>
<div>Master Planning</div>
</div>
</li>
<li class="steps-segment item">
3
<div class="steps-content" style="width:16em">
<div>Concept Design</div>
</div>
</li>
<li class="steps-segment item">
4
<div class="steps-content" style="width:16em">
<div>Schematic Design</div>
</div>
</li>
<li class="steps-segment item">
5
<div class="steps-content" style="width:16em">
<div>Detailed Design</div>
<div>&</div>
<div>Documentation</div>
</div>
</li>
<li class="steps-segment item">
6
<div class="steps-content" style="width:16em">
<div>Construction</div>
<div>&</div>
<div>Completion</div>
</div>
</li>
<li class="steps-segment item">
7
<div class="steps-content" style="width:16em">
<div>Commissioning</div>
</div>
</li>
<li class="steps-segment item">
8
<div class="steps-content" style="width:16em">
<div>Construction</div>
<div>Certification</div>
</div>
</li>
<li class="steps-segment item">
9
<div class="steps-content" style="width:16em">
<div>Handover</div>
</div>
</li>
<li id="hey" class="steps-segment is-active is-dashed item">
10
<div class="steps-content" style="width:16em">
<div>Post Construction </div>
<div>& </div>
<div>Post Occupation </div>
<div>Evaluation</div>
</div>
</li>
<li class="steps-segment item">
11
<div class="steps-content" style="width:16em">
<div>Financial </div>
<div>Completion</div>
</div>
<hr class="TeST"></hr>
</li>
</ul>
<button class="button is-rounded left-paddle paddle" ng-click="test1()">
<div class="step-scroller-text"><<div>
</button>
<button class="button is-rounded right-paddle paddle" ng-click="test2()">
<div class="step-scroller-text">><div>
</button>
</div>
</div>
I am able to scroll the elements with buttons. However not able to achieve fade in fade out effects.
Please help.
Thanks !!

Make nested child element full width

I would like to maintain markup structure and have nested child element go full screen width to have different background color.
HTML example can be seen here (fiddle)
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
</ul>
</div>
</div>
This is what I have:
Wanted result:

The only way to make your hidden divs stretch full width is to position them absolutely, and will only work if none of the parents up to the page div are positioned. Along with this I assume you are using js to hide / show these divs, so when you show the div, you will need to add some bottom margin to the containing li to make room for the hidden content.
Here is a quick mockup of what I mean:
$('.header').hover(function() {
var title = $(this),
content = $(this).next();
content.show();
title.parent().css('margin-bottom', content.outerHeight());
},
function() {
var title = $(this),
content = $(this).next();
content.hide();
title.parent().css('margin-bottom', 0);
});
li {
float: left;
width: 50%;
outline: 1px solid pink
}
li:nth-child(odd) {
clear:left;
}
.section-bg-color {
width:50%;
display:inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
position:relative;
}
.hidden-content {
position:absolute;
left:0;
right:0;
background:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content 1</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: none;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content 3</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content 4</div>
</li>
</ul>
</div>
</div>
Updated fiddle

Try adding
.yourSelectorForDesiredContent {
margin-left: -100%;
background-color: yourColourCode;
}
That should pull it across the screen for you. Not the prettiest way but should achieve result you want.

It's ugly, but you can do something with negative margin and viewport units..
I've used a pseudoelement to make it stretch to the left edge.
fiddle
body {
margin: 0;
}
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
.hidden-content {
width: calc(100vw - 40px);
margin-left: -100%;
background: orange;
padding: 2% 0%;
position: relative;
}
.hidden-content:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: orange;
width: 3em;
margin-left: -3em;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
</ul>
</div>
</div>
EDIT
To make this work for all hidden divs you can use the nth-of-type selector on the list item.
fiddle

Try:
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
//display:inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
padding: 5px 10px;
}
.addon-list {
content: "";
display: table;
clear: both;
}

li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
.clr {
clear: both;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
<div class="clr"></div>
</ul>
</div>
</div>
fiddler link is https://jsfiddle.net/e3sngy3s/8/

Why does body min-width not work alongside fixed divs?

Here is a JSfiddle with the code to my problem:
https://jsfiddle.net/367v2n1q/14/
On the right you will see a red bar which has a fixed position. I'm trying to get the body to have a min width of 808 pixels, but it is letting me re-size the body to smaller than 808.
The center div stops shrinking when it hits 808 pixels wide, but then the fixed div on the right keeps on going and envelops the rest of the content.
CSS
body.total{
background-color: black;
position: relative;
min-width: 808px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
HTML snippet
<!DOCTYPE html>
<html>
<head>
<!-- head stuff here -->
</head>
<body class="total">
<div id="wrapper" class="leftSidePane">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="mainContent">
<h1>
WWW.SITE.COM
</h1>
<h2>dedicated to stuff</h2>
<p style="text-align: center;
color: #5D5D5D;">last updated: 01.01.2016</p>
<br>
<p style="
font-family: 'Times New Roman';
color: #C1C1C1;
font-weight: bold;
font-size: 20px;
text-align: center;
">Site visited 27 times</p>
<br><br>
<hr>
</div>
</div>
<div class="rightSidePane">
<!-- Side bar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand-right">
</li>
<li>
<a href="#">
</a>
</li>
<li>
<div class="barfix"></div>
</li>
<li class="board">
</li>
<li class="nextBar">
</li>
<li>
<div class="tileRightInit" id="bs">
<div class="barTextRight">MAIN</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">News</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Links</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Credits</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">About</div>
</div>
</li>
<li class="bottomRight">
</li>
</ul>
</div>
</div>
</body>
</html>

I figured out the problem. I needed to be using absolute positioning for the div on the right. Here is the fixed JS fiddle: https://jsfiddle.net/367v2n1q/15/
Here is the fixed CSS:
body.total{
background-color: black;
position: relative;
min-width: 840px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
The HTML remained the same. Thanks #Roope for pointing out that the body never fell below 808px width, I don't know why I didn't catch that but you pointed me in the right direction.

jQuery Mobile: Position of external panel / always visible?

Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.
This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page:
always visible on big screens (e.g. desktop browser) and,
when always visible, "inside" the page (e.g. below the header).
All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.
My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (e.g. using forms in the panel).
Is there a clean solution for this problem?

The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em
External Panels go at end of data role page(s).
Demo expand the window to reveal the panel
https://jsfiddle.net/jag6ose3/
Html
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>
</div>
Css
#media (min-width: 40em) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 67%;
padding-top: 2em;
padding-left: 5%;
padding-right: 3%;
float: right;
}
.opanel {
visibility:hidden;
}
}
Code
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open")
});
});

There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.
<script id="panel-init">
function resizeP() {
var cw = $("body").prop("clientWidth");
var padding2x = 32;
if (cw > 900) {
$(".my-content").width(cw - 300 - padding2x);
}
else
$(".my-content").width(cw - padding2x);
}
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open");
});
});
$(document).ready(function () {
resizeP();
});
$(window).resize(function () {
resizeP();
});
</script>
<style>
##media screen and (min-width: 900px) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 300px;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 300px;
/*padding-top: 2em;
padding-left: 5%;
padding-right: 3%;*/
float: right;
}
.opanel {
visibility: hidden;
}
}
.ui-content {
padding: 16px;
}
.countBubl {
float: left;
margin-top: -30px;
margin-left: 35px;
background: #ed1d24;
color: #fff;
padding: 2px;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style>
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
<button>dds</button>
<p>A paragraph with a tooltip. Learn more</p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Calendar</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a>
</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Contacts</h2>
<ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div>
</div>
#*<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>*#
</div>
</div>

How to control #id link on a page?

This FIDDLE will explain more than my words
How to avoid hidden Title when click on Link id 2, Link id 3 and Link id 4?
PS: Please if anyone have a better Name for this question, please help, my English is not that good!
<header id="header">
header
</header>
<div class="catalog">
<div class="col1">
<ul>
<li>Link id 1</li>
<li>Link id 2</li>
<li>Link id 3</li>
<li>Link id 4</li>
<li>Link id 5</li>
</ul>
</div>
<div class="col_alternativ"></div>
<div class="col2">
<div id="id1" class="item">
<h2>Link id 1</h2>
</div>
<div id="id2" class="item">
<h2>Link id 2</h2>
</div>
<div id="id3" class="item">
<h2>Link id 3</h2>
</div>
<div id="id4" class="item">
<h2>Link id 4</h2>
</div>
<div id="id5" class="item">
<h2>Link id 5</h2>
</div>
</div>
</div>
$(window).scroll(function() {
var newValue = {opacity : 100}
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#header").addClass("stablemenu").animate(newValue, 1000);
$(".col1").addClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"inline-block"});
} else {
$("#header").removeClass("stablemenu");
$(".col1").removeClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"none"});
}
});

I was able to do what you wanted... I think. See here: http://jsfiddle.net/wilsonjonash/tdz3H/8/
Edit: Here's the code
<header id="header">
header
</header>
<div class="catalog">
<div class="col1">
<ul>
<li>Link id 1</li>
<li>Link id 2</li>
<li>Link id 3</li>
<li>Link id 4</li>
<li>Link id 5</li>
</ul>
</div>
<div class="col_alternativ"></div>
<div class="col2">
<div class="item">
<div id="id1" class="hederid"></div>
<h2>Link id 1</h2>
</div>
<div class="item">
<div id="id2" class="hederid"></div>
<h2>Link id 2</h2>
</div>
<div class="item">
<div id="id3" class="hederid"></div>
<h2 id="id3">Link id 3</h2>
</div>
<div class="item">
<div id="id4" class="hederid"></div>
<h2>Link id 4</h2>
</div>
<div class="item">
<div id="id5" class="hederid"></div>
<h2>Link id 5</h2>
</div>
</div>
</div>
CSS:
#header {
width: 100%;
height: 100px;
background-color: red;
}
.stablemenu {
position: fixed;
top: 0px;
left:0px;
z-index: 2;
background-color: yellow !important;
}
.catalog {
display: block;
width: 100%;
margin-top: 40px;
}
.catalog .col1 {
display: inline-block;
border: 1px solid #ccc;
width: 25%;
height: auto;
padding: 1%;
margin-right: 1%;
}
.catalog .col_alternativ {
border: 1px solid #fff;
width: 25%;
height: auto;
padding: 1%;
margin-right: 1%;
display: none;
}
.stable_col1 {
position: fixed;
top: 140px;
left: 0px;
}
.catalog .col2 {
display: inline-block;
width: 70%;
height: auto;
vertical-align: top;
}
.item {
border: 1px solid #ccc;
width: auto;
height: 300px;
margin-bottom: 40px;
position: relative;
}
.item .hederid {
position: absolute;
background: #ccc;
width: 20px;
height: 20px;
left: 0px;
top: -140px;
}
JavaScript:
$(window).scroll(function() {
var newValue = {opacity : 100}
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#header").addClass("stablemenu").animate(newValue, 1000);
$(".col1").addClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"inline-block"});
$('.col2').css('margin-top','100px');
//$("#topbar").show().animate(newValue, 1000);
} else {
$("#header").removeClass("stablemenu");
$(".col1").removeClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"none"});
$('.col2').css('margin-top','0');
}
});