jQuery Parallax - изображение, покрывающее слишком большой экран - PullRequest
Новая
       11

jQuery Parallax - изображение, покрывающее слишком большой экран

1 голос
/ 19 сентября 2019

Мне нужно уменьшить высоту моего изображения параллакса, чтобы кнопка начальной загрузки (раздел «opt in») отображалась почти как нижний колонтитул перед прокруткой.

В момент первой загрузки страницы, есть только навигационная панель и фоновое изображение параллакса.

спасибо :)

Я пытался изменить размер CSS и настроить высоту в коде jquery, но ничего не работает.Это только проблема на рабочем столе.

HTML: 

<section id="hero">
        <article>
            <div class="parallax_img" id="img1">

            </div>
        </article>

</section>

 <!-- OPT IN SECTION -->

        <section id="optin">

            <div class="container">
                <div class="row">
                    <div  class="col-sm-8">
                        <p class="lead-sign"><strong>Commit to a healthy habit, </strong> your first class is on us!.</p>
                    </div><!-- col -->

                    <div  class="col-sm-4">
                        <button class="btn btn-success btn-lg btn-block"><a href="https://www.momoyoga.com/yoga-with-emily/register/">
                       Sign Me Up</a></button>
                        </div><!-- col -->

CSS: 


.parallax_img {
    height: 500px;
    background-image: url('../img/yogalight.jpeg');
    background-attachment: fixed;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 160% auto;

}
@media screen and (max-width: 768px) {
    .parallax_img {
        background-attachment: inherit;
    }
}</style>


 #optin { 

    background: #F3DFE0;
    padding: 20px 0;
    color: black; 
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 1.2em;
 }

 #optin p { 

    margin: 20px 20px 0 0;
 }

jQuery: 

/* resize the image(s) on page load */
    $(document).ready(function() {
        resize_all_parallax();
    });

    /* resize the image(s) on page resize */
    $(window).on('resize', function(){
        resize_all_parallax();
    });

    /* keep all of your resize function calls in one place so you don't have to edit them twice (on page load and resize) */
    function resize_all_parallax() {
        var div_id = 'img1'; /* the ID of the div that you're resizing */
        var img_w = 1000; /* the width of your image, in pixels */
        var img_h = 864; /* the height of your image, in pixels */
        resize_parallax(div_id,img_w,img_h);
    }

    /* this resizes the parallax image down to an appropriate size for the viewport */
    function resize_parallax(div_id,img_w,img_h) {
        var div = $('#' + div_id);
        var divwidth = div.width();
        if (divwidth < 769) { var pct = (img_h/img_w) * 105; } /* show full image, plus a little padding, if on static mobile view */
        else { var pct = 60; } /* this is the HEIGHT as percentage of the current div WIDTH. you can change it to show more (or less) of your image */
        var newheight = Math.round(divwidth * (pct/100));
        newheight = newheight  + 'px';
        div.height(newheight);
    }
...