The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript I can´t fix a div to the viewport but its parent

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #297335

    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) {
    } else {



    $(window).scroll(function() {

    Here the html/php code:


    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;    
    z-index: 2;


    Right now div remains fixed over its parent and I am not able to fixed it to the viewport.

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.