在桌面屏幕上滚动时,Div会关闭,并且会固定在移动设备屏幕上

时间:2017-08-14 13:33:54

标签: javascript jquery mobile

当你在比991更宽的屏幕上滚动时,我想要一个div跟随。在屏幕尺寸较小的我想要div fixe。我希望每次有人加载或调整页面大小时都会刷新javascript代码。

这是我的代码(它不干......)。

我的问题是当我调整窗口大小时(桌面屏幕 - >移动屏幕 - >桌面屏幕......): 1 - 在手机屏幕上,我无法进入页面底部 2 - 在桌面屏幕上我滚动页面时遇到问题

# read the data
set f [open file]
set data [read -nonewline $f]
close $f

# increment the numbers
regsub -all {=\s*(\d+)\s*$} $data {= [expr {\1 + 1}]} new
set new [subst -novariables -nobacklashes $new]

# write the data
set f [open file w]
puts $f $new
close $f

1 个答案:

答案 0 :(得分:0)

这是我的工作代码。谢谢你@iMatoria干了它。

//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;

$.fn.followTo = function(pos) {
    var $this = this,
        $window = $(window);

    $window.on("resize scroll", function(e) {
        function positionByScreen(positionForBiggerScreen, topOffsetForBiggerScreen) {
            if (smallscreen == false) {
                //alert('bigcreen scroll end');
                $this.css({
                    position: positionForBiggerScreen,
                    top: topOffsetForBiggerScreen
                });
            } else {
                //alert('smallscreen no scroll end ');
                $this.css({
                    position: 'inherit',
                    top: 0
                });
            }
        }

        if ($window.scrollTop() > pos) {
            positionByScreen("absolute", pos);
        } else {
            positionByScreen("fixed", 180);
        };
    });
};

$(window).on("resize load", function() {
    smallscreen = !($(window).width() > 991);

    //if it's not a small screen activate the scrolling
    $('#checkout_validation').followTo(smallscreen ? 0 : 400);

    //var d = document.getElementById("checkout_validation");
    //d.className += " otherclass";
});