Forums

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
    Posts
  • #297335
    cperezsola
    Participant

    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:

        </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.

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