Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using JQuery for my website

    First off...apologies for this post as its my first and im probably going to make a huge number of mistakes and errors in posting, also apologies if this is in the wrong forum.

    Im a graphic design student and sadly we dont really get taught enough real web design so ive been trying to teach myself by building my own website.

    One of the elements of certain websites ive always admired is the sticky navigation bar which once you attempt to scroll past it will stick to the top of the window,
    a la this website http://alwayscreative.net/

    So ive been building my website and looking into the JQuery needed to do this and I managed to find the JQuery I think i need but Im having trouble implementing this in my Code (I am using dreamweaver incidentally)
    I think this may be just my inexperience with HTML and such.
    Ive been trying for quite a while now to use the JQuery I have found but im having no luck.

    Essentially what im trying to find out is how to create a 45px DIV that is at the top of the ''SectionTwo'' div, to function as a navigation bar (I can create and style divs comfortably, although i am not sure if i need to do anything special when im doing this)
    which i can then use the JQuery to make it behave like the navigation bar on the website i mentioned earlier.

    Here is the code i have so far

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	margin:0;
    }
    #Container {
    	background-color: #0C9;
    	height: 10000px;
    	width: auto;
    }
    #SectionOne {
    	background-color: #699;
    	height: 2000px;
    	width: auto;
    }
    #SectionTwo {
    	background-color: #3FF;
    	height: 2000px;
    	width: auto;
    }
    #SectionThree {
    	background-color: #069;
    	height: 2000px;
    	width: auto;
    }
    #SectionFour {
    	background-color: #66F;
    	height: 2000px;
    	width: auto;
    }
    #SectionFive {
    	background-color: #690;
    	height: 2000px;
    	width: auto;
    }
    </style>
    </head>
    
    <body>
    <div id="Container">
      <div id="SectionOne"></div>
      <div id="SectionTwo"></div>
      <div id="SectionThree"></div>
      <div id="SectionFour"></div>
      <div id="SectionFive"></div>
    </div>
    </body>
    </html>
    and here is the two Examples of JQuery I have. The main reason Ive been confused is iv been finding so many conflicting tutorials and answers in the books i have.


    Code:
    var menuOffset = $('#menu')[0].offsetTop;
    
    $(document).bind('ready scroll', function() {
        var docScroll = $(document).scrollTop();
    
        if (docScroll >= menuOffset) {
            $('#menu').addClass('fixed');
        } else {
            $('#menu').removeClass('fixed');            
        }
    
    });
    Code:
    $(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;
    
    var stickyNav = function(){
    var scrollTop = $(window).scrollTop();
    
    if (scrollTop > stickyNavTop) {
    $('.nav').addClass('sticky');
    } else {
    $('.nav').removeClass('sticky');
    }
    };
    
    stickyNav();
    
    $(window).scroll(function() {
    stickyNav();
    });
    });
    Last edited by VIPStephan; 06-17-2013 at 04:22 PM. Reason: fixed code BB tags

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    - failed to properly read op's post. my bad.
    Last edited by DanInMa; 06-17-2013 at 05:47 PM.

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, i looked into using purely CSS. but thus far i only found ways to have fixed navigation bars, no way to have a navigation bar which is not fixed until you try scroll past it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •