изменить стиль div при прокрутке

Question

изменить стиль div при прокрутке

0

У меня есть этот JS-код:

$(document).scroll(function(e) {
    var scrolltop = $(window).scrollTop();
    var mindist = 1000;
    var closest = '';
    $('#header').each(function(i, el){
        var thisdist = Math.abs(scrolltop - $(el).offset().top);
        if (thisdist < mindist) {
            closest = el.id;
            mindist = thisdist;
        }
    });
    if (closest != '') {
        $('#header').toggleClass('test');
    }
});

и мой HTML:

<div id="header">
    <img src="header.png" width="100%" style="max-width:1024px;" />
</div> <!-- header-topbar -->

Когда пользователь начинает прокручивать страницу вниз, я хочу, чтобы высота заголовка была меньше, а также изображение было меньше.

Я пробовал это в своем CSS:

.test {
    height: 100px;
}

но он вообще не меняет высоту.

Ashish Panchal 15 май 2014, в 11:58

Источник

3

почему $ ('# header'). каждый? заголовок является идентификатором и должен быть только один раз
caramba 15 май 2014, в 09:31
0

bit.ly/1v8pFWE
Bhavik 15 май 2014, в 09:35

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

почему $ ('# header'). каждый? заголовок является идентификатором и должен быть только один раз

Ashish Panchal · Answer 1 · 2014-05-15T08-08-00.000Z

Попробуй это:

CSS:

<style>
.test img {
    height: 100px;
    background-color: #ccc;
    position: fixed;
    top: 0;
}
</style>

HTML:

<div id="header">
    <img src="header.png" width="100%" style="max-width:1024px;" />
    <p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p><p>this is a simple text</p>
</div> <!-- header-topbar -->

JS:

<script>
$(document).scroll(function(e) {
    $(window).scrollTop() > 100 ? $('#header').addClass('test') : $('#header').removeClass('test');
});
</script>

Abel Callejo · Answer 2 · 2014-05-15T10-31-00.000Z

Здесь мое полное решение:

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <style>
            html,body{
                width:100%;
                height:100%;
                border:0px;
                margin:0px;
                padding:0px;
                }
            body{
                position:relative;
                overflow:hidden;
            }
            #wrap{
                width:100%;
                height:100%;
                position:relative;
                overflow-y:auto;
                display:inline-block;
            }

        .test{
            height: 100px;
            display:block;
            overflow:hidden;
            }
        </style>
        <script>
            var position = 0;

            function redraw()
                {
                var height=$('#body').height();
                if(position>0)
                    {
                    $('#header').toggleClass('test',true);
                    }
                console.log(position); // see the output on the developer tool console
                }
        </script>
    </head>
    <body>
        <div id="wrap">
        <div id="header">
        <img src="header.png" width="100%" style="max-width:1024px;" />
        </div> <!-- header-topbar -->
        <br />
        <br />
        ... <!-- put as many break tags as you can to test it -->
        <br />
        <br />
        </div>
        <script>
        position = $('#wrap').scrollTop();
        $(document).ready(function()
            {
            $('#wrap').scroll(function()
                {
                var scroll = $('#wrap').scrollTop();

                setTimeout('redraw()',5);

                position = scroll;
                });
            });
        </script>
    </body>
</html>

Используйте setTimeout() чтобы получить значение прокрутки в реальном времени. Кроме того, вместо использования toggleClass(className) используйте toggleClass(className,switch).

Bhushan Kawadkar · Answer 3 · 2014-05-15T07-23-00.000Z

Попробуйте это: используйте функцию таймера, чтобы знать, когда начинается и останавливается прокрутка

(function() {        
    var timer;
    $(window).bind('scroll',function () {
        clearTimeout(timer);
        $('#header').addClass("test");// set height to 100px
        timer = setTimeout( refresh , 15000 );
    });
    var refresh = function () { 
        $('#header').removeClass("test");
    };
})();