Msaada kuhusu floating Top menu using CSS/XHTML

deejaywillzz

JF-Expert Member
Joined
Mar 11, 2014
Posts
637
Reaction score
224
Code yangu ni hii

Code: 
<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?
 
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
 
Okay, let me know when you accomplish that,i'd like to see how its done
 
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.
 
Sheeba said:
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.
Click to expand...

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
 
simplest way ni kutoa javascript
then use position : fixed;
 
You must log in or register to reply here.

Similar Discussions

Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…