SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    England
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Fixed position menu and floating block?

    Hi all,

    I'm looking to implement both the fixed menu on http://cdn1.1stwebdesigner.com/wp-co...ery/index.html and the scrolling box on http://www.ebuyer.com/283002-extra-v...p-pc-7873-1047 on the same page - can you guys point me in the right direction (article or tut)?

    I've had a quick browse and can't really find what I'm looking for.

    Many thanks

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The most obvious problem with running the two scripts together is that both apply the class "fixed" to the elements that are pinned in position. To prevent this, you could change the class in one script:

    nagging-menu.js changed from 'fixed' to 'fixed-side'

    Code Javascript:
    $(function(){
     
        var menu = $('#menu'),
            pos = menu.offset();
     
            $(window).scroll(function(){
                if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                    menu.fadeOut('fast', function(){
                        $(this).removeClass('default').addClass('fixed-side').fadeIn('fast');
                    });
                } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed-side')){
                    menu.fadeOut('fast', function(){
                        $(this).removeClass('fixed-side').addClass('default').fadeIn('fast');
                    });
                }
            });
     
    });

    and the .fixed selector in style.css to .fixed-side

    Code CSS:
    .fixed-side {
        position: fixed;
        top: -5px;
        left: 0;
        width: 100%;
     
        box-shadow: 0 0 40px #222;
        -webkit-box-shadow: 0 0 40px #222;
        -moz-box-shadow: 0 0 40px #222;
    }
    Apart from this, it would be necessary to see a working example to take it any further.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    England
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    The most obvious problem with running the two scripts together is that both apply the class "fixed" to the elements that are pinned in position. To prevent this, you could change the class in one script:

    nagging-menu.js changed from 'fixed' to 'fixed-side'

    Code Javascript:
    $(function(){
     
        var menu = $('#menu'),
            pos = menu.offset();
     
            $(window).scroll(function(){
                if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                    menu.fadeOut('fast', function(){
                        $(this).removeClass('default').addClass('fixed-side').fadeIn('fast');
                    });
                } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed-side')){
                    menu.fadeOut('fast', function(){
                        $(this).removeClass('fixed-side').addClass('default').fadeIn('fast');
                    });
                }
            });
     
    });

    and the .fixed selector in style.css to .fixed-side

    Code CSS:
    .fixed-side {
        position: fixed;
        top: -5px;
        left: 0;
        width: 100%;
     
        box-shadow: 0 0 40px #222;
        -webkit-box-shadow: 0 0 40px #222;
        -moz-box-shadow: 0 0 40px #222;
    }
    Apart from this, it would be necessary to see a working example to take it any further.
    Thanks for your reply, I will get onto this asap


Bookmarks

Posting Permissions

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