ScrollingTop gets stuck

ScrollingTop gets stuck - javascript

The code below is scrolling down just fine but not to top. It gets stuck when it goes to the bottom or top. But if dont be so close to the bottom and top it work fine.
It seems like if you clicks more time that it should be when you rich the bottom you have to click the same number to getting scroll to top.
Any clue?
var scrolled = 0;
$(function () {
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
$(".nav").animate({
scrollTop: scrolled
});
});
$("#downClick").on("click", function () {
console.log("downClick");
scrolled = scrolled + 100;
$(".nav").animate({
scrollTop: scrolled
});
});
});
.arrow-button {
cursor: pointer;
}
.arrow-button:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#sidebar {
width: 880px;
font-weight: bold;
}
.nav {
max-height: 150px;
overflow-y:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row second-row">
<div class="col-md-11">
<div id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li class="active">Maths</li>
<li>English</li>
<li>Art and Design</li>
<li>Drama</li>
<li>Music</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
<li>Home economics</li>
<li>Physical Education</li>
<li>Computing Science</li>
<li>French</li>
<li>German</li>
<li>Mandarin</li>
<li>Religious Education</li>
<li>Modern Studies</li>
<li>Geography</li>
<li>History</li>
<li>Creative computing</li>
<li>Craft, Design and Technology</li>
</ul>
</div><!--/.well -->
</div>
</div>
<div class="col-md-1" style="padding-left:35px;">
<img src="images/arrow-up.png" width="70" class="arrow-button" id="upClick" />
<img src="images/arrow-down.png" width="70" style="margin-top:50px;" class="arrow-button" id="downClick" />
</div>
</div>

well... it works :3
little tip:
.stop() animation before playing another.
check max and min value of scroll
var scrolled = 0;
$(function () {
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
if(scrolled < 0) scrolled = 0;
$(".nav").stop().animate({
scrollTop: scrolled
});
});
$("#downClick").on("click", function () {
console.log("downClick");
scrolled = scrolled + 100;
if(scrolled > $(".nav").prop("scrollHeight"))
scrolled = $(".nav").prop("scrollHeight");
$(".nav").stop().animate({
scrollTop: scrolled
});
});
});
.nav {
max-height: 150px;
overflow-y: auto;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row second-row">
<div class="col-md-11">
<div id="sidebar" role="navigation" >
<div class="well sidebar-nav">
<ul class="nav">
<li class="active">Maths</li>
<li>English</li>
<li>Art and Design</li>
<li>Drama</li>
<li>Music</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Modern Studies</li>
<li>Geography</li>
<li>History</li>
<li>Creative computing</li>
<li>Craft, Design and Technology</li>
</ul>
</div>
</div>
</div>
<div class="col-md-1" >
<img src="images/arrow-up.png" width="70" class="arrow-button" id="upClick" />
<img src="images/arrow-down.png" width="70" class="arrow-button" id="downClick" />
</div>
</div>

When you trying scroll always remember it should not go in negative value.
At the start of your program it goes in -ve value, add condition
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
if(scrolled>0){
$(".nav").animate({
scrollTop: scrolled
});
}
});

Related

Click outside div and icon, div hide

HTML:
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Jquery:
$("header .menu-icon").click(function() {
$(".menu-drop").slideToggle();
});
CSS:
.menu-drop {
display: none;
}
I want when click outside .menu-drop and .menu-icon then .menu-drop div hide
when clicking menu-drop div it will stay not hide.

Use mouseup with document like below.
const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
if (!$menu.is(e.target) &&
$menu.has(e.target).length === 0) {
$(".menu-drop").hide();
}
});
$('.menu-icon').on('click', () => {
$(".menu-drop").slideToggle();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

On document click, you can check whether the clicked element has the specific class or not, if it does not have the class slideUp() the menu. You also have to prevent the event propagation on clicking the menu.
$(".menu-icon").click(function(e) {
e.stopPropagation();
$(".menu-drop").slideToggle();
});
$(document).click(function(e) {
if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
$(".menu-drop").slideUp();
}
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Use a single event listener on the body. Query the event target and show and hid the menu as required.
$(document).ready(function() {
/*Add event listener to document*/
$(document).click(function(event) {
//If the target is the icon, toggle the menu
console.log(event.target);
console.log($(event.target).closest(".menu-drop").length)
if(event.target.matches(".menu-icon"))
{
$(".menu-drop").slideToggle();
}
//Otherwise if outside the menu, slide up
else if($(event.target).closest(".menu-drop").length === 0 )
{
$(".menu-drop").slideUp();
}
});
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Here some modification
$(".menu-icon").click(function(e) {
$(".menu-drop").slideDown();
});
$(document).on('click', function (e) {
if(!$(e.target).hasClass('menu-icon'))
$(".menu-drop").slideUp();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

How to close custom jquery drop down using like default select dropdown

I am trying to close a custom jquery drop down on click of outside of dropdown, just like default behavior of HTML select dropdown, I tried to use the window click but that is creating trouble in opening the dropdown it self.
$(".selected").click(function() {
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function() {
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
.custom-dropdown {
width: 300px;
}
.selected {
padding: 5px;
cursor: pointer;
min-height: 37px;
background-color: #ccc;
}
.custom-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.custom-dropdown-list.open {
display: block;
}
.custom-dropdown-list li {
padding: 5px;
cursor: pointer;
}
.custom-dropdown-list li:hover {
background: #f2f2f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
</ul>
</div>
JSfiddle
https://jsfiddle.net/5zgyouwL/1/

This will work fine for you:
In this method I have used event.stopPropagation();
Your method was right on the path, it just needed some tweaks - I have used the click on the <html> to but the difference is that I have prevented the body click on the .selected and .custom-dropdown-list li using event.stopPropagation();.
$("html").click(function(event) {
$(".custom-dropdown-list").removeClass("open");
});
$(".selected").click(function() {
event.stopPropagation();
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function() {
event.stopPropagation();
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
.custom-dropdown {
width: 300px;
}
.selected {
padding: 5px;
cursor: pointer;
min-height: 37px;
background-color: #ccc;
}
.custom-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.custom-dropdown-list.open {
display: block;
}
.custom-dropdown-list li {
padding: 5px;
cursor: pointer;
}
.custom-dropdown-list li:hover {
background: #f2f2f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>
Hope this was helpfull.

I think what you might want is when clicked anywhere else of custom select/dropdown it must close.
So here it is:
$(".selected").click(function(){
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function(){
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
/*Mouse click anywhere but custom select dropdown, will close it. */
$(document).mouseup(function (e) {
var container = $(".custom-dropdown");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".custom-dropdown-list").removeClass("open");
}
});
.custom-dropdown { width:300px;}
.selected { padding:5px; cursor:pointer; min-height:37px; background-color:#ccc;}
.custom-dropdown-list { list-style:none; padding:0; margin:0; display:none;}
.custom-dropdown-list.open { display:block;}
.custom-dropdown-list li { padding:5px; cursor:pointer;}
.custom-dropdown-list li:hover { background:#f2f2f2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>

The key is Event.stopPropagation()
$('body').on('click', function(){
// close the drop down
});
$('.custom-dropdown').on('click', function(e){
e.stopPropagation();
});

You use Mouse Up Event Also Like this
$(document).mouseup(function(e)
{
var container = $(".custom-dropdown");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});

I believe #weBer answered your question , but another way to do this is to have an event handler right on your html element and inside that check if the targeted element or its children are being clicked :
$('html').on('click' , function(e){
if($(e.target).closest('.custom-dropdown').length ) return
$(".custom-dropdown-list").toggleClass("open");
});
FIDDLE HERE

submenu not loading on hover

I have menu and submenu which was created totally as divs instead of ul li. So, on hovering the menu element, I need to target a particular div and show as submenu. I have written a jquery event by passing submenu id as data-target to target the specific div to show as submenu. When I apply break points, the loop is going inside., but unable to remove initial property of submenu (display:none) to (display:block). Here is the plunker link for more details. please let me know where i`m going wrong.
I understand this div approach is not right one. But I have to develop according to existing HTML
$("#mainDiv div").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(liID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
jQuery('#' + menuliID).hover(function(){
console.log("entered inside function");
$('#' + subMenuId).css('display', 'block !important');
console.log('"#' + subMenuId + '"');
},
function () {
console.log("entered inside 2nd function")
jQuery('#' + subMenuId).css('display', 'none');
}
);
}
);

please change
$('#' + subMenuId).css('display', 'block !important');
into
$('#' + subMenuId).show();
as it is not necessary to apply .css() as you can do your work with .show() or .hide()
and please see my working snippet
// Code goes here
$("#mainDiv > .menuli").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(menuliID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
if($('#' + subMenuId).is(":visible")){
$('#' + subMenuId).hide();
}else{
$('#' + subMenuId).show();
}
}
);
/* Styles go here */
#mainDiv div{
border:1px solid;
width:30%;
}
.submenu{
position:absolute;
top:0;
left:24%;
}
.submenu ul li{
border:1px solid;
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="mainDiv">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
</body>
</html>

You can simplify your code to the following. You just need to toggle the display of the sub menus when hover over main menu.
I have attached hover event to submenu so that it is displayed on mouse over.
//Toggle display of submenu when hover on main menu
$("#mainDiv div").hover(function () {
$('#' + $(this).attr('data-target')).toggle();
});
//Display submenu when hover on it
$(".submenu").hover(function(){
$(this).show();
}, function(){
$(this).hide();
})
.submenu {
border: 1px solid transparent;
}
.menuli{
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv" style="display:inline-flex;padding-top:10px;">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>

How Would i change the content of a webpage with the Onclick Function using a function

function changecontent(description){
console.log(description);
document.getElementById('content').innerHTML = description;
}
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Mouse Over Subject</li>
<li onClick="changecontent();">Math</li>
<li onClick="changecontent();">Science</li>
<li onClick="changecontent();">Geography</li>
<li onClick="changecontent();">Arts</li>
<li onClick="changecontent();">Buisness</li>
<li onClick="changecontent();">Health</li>
<li onClick="changecontent();">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
I'm planning to make multiple layouts for the page and based on which item is clicked the content should be changed accordingly. The problem is that I don't know how to make the java function change the content differently based on which item is clicked...

can you make something like this:
<li onClick="changecontent('Math');">Math</li>
this should work..

So, if I understand you correctly, you have several descriptive texts for each of your subjects that you want to dynamically insert into #content. You could just store your texts in variables:
var mathDesc = "Math is awesome and <b>not scary at all!</b>";
You could then insert it to #content like this:
<li onClick="changecontent(mathDesc);">Math</li>
Personally I would use a different approach: Having multiple content-divs and hiding all but one at each time.
One way to hide content is to programmatically assign a className, e.g. hidden and to assign display:none as CSS rule to that class.
Below is an example snippet. I identified the content based on the list-item-id, which I think is what you wish to do.
function changeContent(id) {
var content = document.getElementsByClassName("content");
for (var i = 0; i < content.length; i++) {
if (content[i].id === id + "Content") {
content[i].classList.remove("hidden");
} else {
content[i].classList.add("hidden");
}
}
}
document.getElementById("chooseSubject").onclick = function(e) {
changeContent(e.target.id);
}
#chooseSubject {
list-style-type: none;
}
#chooseSubject li {
cursor: pointer;
}
#chooseSubject li:hover {
background-color: rgb(267, 214, 269);
}
#chooseSubject li:active {
background-color: rgb(167, 114, 169);
}
.hidden {
display: none;
}
<ul id="chooseSubject">
<li id="Math">Math</li>
<li id="Science">Science</li>
<li id="Geography">Geography</li>
<li id="Arts">Arts</li>
</ul>
<div id="MathContent" class="content hidden">
Math is awesome and <b>not scary at all!</b>
</div>
<div id="ScienceContent" class="content hidden">
Science is like math but less exact and more hands-on.
</div>
<div id="GeographyContent" class="content hidden">
You know.. Countries, cities, rivers and stuff.
</div>
<div id="ArtsContent" class="content hidden">
You learn about things that have no function in Arts.
</div>

you have to pass description param to the method like this way
<li onClick="changecontent("Math");">Math</li>

Here is how I did it, sorry my question was vague im quite new at this kind of thing....
<script>
function changecontent(clicked_id){
alert(clicked_id);
}
</script>
<!doctype html>
<html>
<head>
<style>
}
.editingfunction{
background-color: ;
text-decoration-color: white;
border :none;
opacity: 0.4;
width: 100px;
}
.col:active {
background-color: rgb(167,114,169);
cursor:pointer;
text-decoration-color:red;
}
.col:visited
{
text-decoration-color:red;
}
body {
background: ;
font-family: ;
text-decoration-color: white;
}
</style>
</head>
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Click Subject</li>
<li class="col" id="Math" onClick="changecontent(this.id);">Math</li>
<li class="col" id="Science" onClick="changecontent(this.id);">Science</li>
<li class="col" id="Geography" onClick="changecontent(this.id);">Geography</li>
<li class="col" id="Arts" onClick="changecontent(this.id);">Arts</li>
<li class="col" id="Buisness" onClick="changecontent(this.id);">Buisness</li>
<li class="col" id="Health" onClick="changecontent(this.id);">Health</li>
<li class="col" id="Social_Science" onClick="changecontent(this.id);">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
<!-- begin snippet: js hide:false -->

Can't get sticky navbar to work

First, why isn't http://jsfiddle.net/s4eMT/ working?
Second, the js-code that I put in jsfiddle is working in my project but I have a some kind of browser-support issue.
When I run the website in Chrome it works as expected, it gets fixed when you scroll down to the navbar, when I run it in Safari and Firefox it sets the navbar fixed but also shrinks the navbar way smaller and floating left. I can't figure out what it is that's not supported by the last mentioned browsers.
Here's my code:
HTML
<div id="navbar-wrapper">
<div class="navbar">
<div class="navbar-inner hidden-phone">
<ul class="nav">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
<li class="logo hidden-phone"><img src="#routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></li>
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div class="navbar-inner visible-phone">
<ul class="nav phone-only">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
</ul>
<ul class="nav phone-only">
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div id="language" class="hidden-phone">
<img src="#routes.Assets.at("images/gb.png")" />
<img src="#routes.Assets.at("images/se.png")" />
</div>
</div>
</div>
CSS
#navbar-wrapper {
position: relative;
min-width: 100%;
border:1px solid red;
}
JAVASCRIPT
$(document).ready(function () {
var stickyNavTop = $('#navbar-wrapper').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navbar-wrapper').css({
'position': 'fixed',
'top': '0'
});
alert('afa');
} else {
$('#navbar-wrapper').css({
'position': 'relative'
});
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
What am I missing?
regards,

Develop Reference

JavaScript is the programming language of the Web.

ScrollingTop gets stuck - javascript

When you trying scroll always remember it should not go in negative value. At the start of your program it goes in -ve value, add condition $("#upClick").on("click", function () { console.log("upClick"); scrolled = scrolled - 100; if(scrolled>0){ $(".nav").animate({ scrollTop: scrolled }); } });

Related

Click outside div and icon, div hide

How to close custom jquery drop down using like default select dropdown

submenu not loading on hover

How Would i change the content of a webpage with the Onclick Function using a function

Can't get sticky navbar to work

Categories

Resources