Home › Forums › JavaScript › I can´t fix a div to the viewport but its parent
- This topic is empty.
-
AuthorPosts
-
October 15, 2019 at 8:03 am #297335cperezsolaParticipant
I have an owl carousel which shows both image of several products and the features of each products. I would like to fix the div with the img product at the top of the page while scrolling to see all the specifications while the img remains fixed and once I scroll up at the top of the page, remove fixed position. However, when I applied fixed position to the element, it is fixed over its parent and not over the viewport.
I have tried to apply fixed position by js but same problem happens.
Here the js code:
$(document).ready(function() { var stickyNavTop = $(‘.cabecera-guante’).offset().top;
var stickyTopNav = function() {
var scrollTop = $(window).scrollTop();if (scrollTop > stickyNavTop) { $('.cabecera-guante').addClass('sticky'); } else { $('.cabecera-guante').removeClass('sticky'); }
};
stickyTopNav();
$(window).scroll(function() {
stickyTopNav();
});
});Here the html/php code:
$guante) {
?>
<div class="item" data-index="item-“>-
$palma) {
- ‘;
if ($palma == true) {
echo ‘‘;
} else {
echo ‘‘;
}
echo ‘
echo ‘‘;
}
?>-
$corte) {
- ‘;
if ($corte == true) {
echo ‘‘;
} else {
echo ‘‘;
}
echo ‘
echo ‘‘;
}
?>-
$proteccion) {
- ‘;
if ($proteccion == true) {
echo ‘‘;
} else {
echo ‘‘;
}
echo ‘
echo ‘‘;
}
?></div>
and here css:
.owl-comparativa {
float: right;
}
.owl-comparativa .owl-nav {top: 12%;
}
.comparador_lineas .clear {
background: #d6d6d6; padding: 15px; font-weight: 900; font-size: 1.2em; text-transform: uppercase
}
.comparador_lineas ul li:nth-of-type(odd) {
background: #f7f8f9;
}
.owl-comparativa ul li {
color: #FFA000;
}
.cabecera-guante {
padding: 0 20px;
}
.owl-comparativa .owl-item > div {
padding: 0;
}
.owl-comparativa .owl-item ul {
text-align: center
}
.comparador_lineas ul li {
padding: 15px; font-weight: 700;
}
.owl-comparativa .owl-dots {
display: none;
}
.sticky {
position: fixed; top:0; z-index: 2;
}
Right now div remains fixed over its parent and I am not able to fixed it to the viewport.
- ‘;
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.