Hallo,
ich bin gerade dabei mein class mainMenu fixiert beim Scrollen nach unten anzupassen. Ich denke, dass ich es fast geschafft habe aber dennoch ein paar Bugs habe. Das ganze habe ich mit Hilfe von JavaScript umgesetzt.
Java
{literal}
<script data-relocate="true">
//<![CDATA[
$.fn.pixels = function(property) {
return parseInt(this.css(property).slice(0,-2));
};
var $window = $(window);
var $topHeaderGap = $('#pageHeaderPanel').height();
var $topMenuWrapper = $('.mainMenu');
$(function() {
var $scrollOffset = $window.scrollTop();
if ($scrollOffset > $topHeaderGap) {
$topMenuWrapper.addClass('fixed');
}
else {
$topMenuWrapper.removeClass('fixed');
}
$(document).scroll(scrollPage).resize(scrollPage);
});
function scrollPage() {
var $scrollOffset = $window.scrollTop();
if ($scrollOffset > $topHeaderGap) {
$topMenuWrapper.addClass('fixed');
}
else {
$topMenuWrapper.removeClass('fixed');
}
}
//]]>
</script>
{/literal}CSS
@media (min-width: 1025px) {
.mainMenu.fixed {
width: 100%;
position: fixed;
top: 0px;
z-index: 300;
}
}Nun mache ich irgendwo einen kleinen Denkfehler. Beim Scrollen nach unten habe ich folgendes Bild:
Kann mir jmd weiterhelfen?
Gruß