Msaada kuhusu floating Top menu using CSS/XHTML

[deejaywillzz]

Code yangu ni hii

<html>
<head>
[COLOR=#0000cd]<script src="jquery-latest.min.js" type="text/javascript"></script>[/COLOR]
[COLOR=#000080]<style type="[/COLOR][COLOR=#000080]text/css[/COLOR][COLOR=#000080]" media="[/COLOR][COLOR=#000080]all[/COLOR][COLOR=#000080]">[/COLOR][COLOR=#000080]@import url("default.css");</style>[/COLOR]</head>
<body>
[COLOR=#006400]<script>
$(function(){
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');

                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });
</script>[/COLOR]

[COLOR=#800080]  <div id="stickyheader">
   TOP MENU
  </div>
 
  <div id="stickyalias"></div>[/COLOR]

</body>
</html>

Hamna jinsi naweza kupata same results kwa kutumia CSS/XHTML only?

 

[zech]

You could do it with CSS ( just make it fixed by default )but i don't know if you would be able to have it fixed only when a user has scrolled past it ( i was thinking media queries maybe but still i don't think css has events ), your best bet would be to just stick with jQuery/JavaScript unless you have strong reasons not to

 

[deejaywillzz]

You could do it with CSS ( just make it fixed by default )but i don't know if you would be able to have it fixed only when a user has scrolled past it ( i was thinking media queries maybe but still i don't think css has events ), your best bet would be to just stick with jQuery/JavaScript unless you have strong reasons not to

Thank you zech, someone told me it can be accomplished with anchor tag, im trying to play around and see if I can make it work

 

[zech]

Okay, let me know when you accomplish that,i'd like to see how its done

 

[Sheeba]

you can use css kama zech alivyosema.
<style>
#stickyheader {
position: absolute;
z-index:100;
}
</style>
make sure z-index ni kubwa so that user akiscroll it is not covered by other elements.

 

[deejaywillzz]

you can use css kama zech alivyosema.
<style>
#stickyheader {
position: absolute;
z-index:100;
}
</style>
make sure z-index ni kubwa so that user akiscroll it is not covered by other elements.

Hiyo nilishajaribu mkuu ila niki scroll down inapotea, inakuwa on top of divs lakini hai float kwahiyo na yenyewe ina scroll up

Code yako iko sawa ila position inatakiwa iwe fixed

<style>
#stickyheader {
position: fixed;
z-index:100;
}
</style>

Mimi sijaridhika kwa kutumia njia hii, sababu nilitaka kuweka some sort of event kwamba uki scroll down na ika float, background color should change and icons pia. Lakini itabidi nitumie jQuery hapa sina ujanja zech

 

[Hunteroflove]

napita hapa

 

[misso]

simplest way ni kutoa javascript
then use position : fixed;