楼层定位效果

const leftNav = {
    $newLeftNav: $('.left-nav'),
    $leftNav: $('.left-nav-item'),
    init: function () {
        this.bind();
    },
    bind: function () {
        const self = this;
        self.$leftNav.on('click', function () {
            const _this = this;
            const area = '.' + $(_this).attr('data-area');
            const distance = $(_this).attr('data-area') ? $(area).offset().top : 0;
            $('html, body').animate({
                'scrollTop': distance + 'px'
            }, 1000);
        });
        self.handlePageScroll();
        $(document).scroll(function () {
            self.debounce(self.handlePageScroll, 200);
        });
    },
    // 页面滑动选中左侧导航栏
    handlePageScroll: function () {
        const self = this;
        let scrollEl = $(document.scrollingElement || document.body);
        let top = scrollEl.scrollTop();
        if (top > $('.daily_recom').offset().top) {
            self.$newLeftNav.fadeIn();
        } else {
            self.$newLeftNav.fadeOut();
        }
        let area = null;
        let floor = null;
        let nav = null;
        for (let i = self.$leftNav.length - 1; i >= 0; i--) {
            nav = self.$leftNav.eq(i);
            area = nav.attr('data-area');
            floor = $('.' + area);
            if (!floor || !floor.length) {
                continue;
            } else if (floor.offset().top <= top) {
                nav.addClass('active').siblings().removeClass('active');
                return;
            }
        }
        nav && nav.addClass('active').siblings().removeClass('active');
    },
    // 防抖函数
    debounce: function (action, delay) {
        let lastTimer;
        if (lastTimer) {
            return;
        }
        action.apply(this, arguments);
        lastTimer = setTimeout(function () {
            clearTimeout(lastTimer);
            lastTimer = null;
        }, delay);
    }
}

leftNav.init();

可拖动的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            top: 100px;
            left: 100px;

            width: 100px;
            height: 100px;

            background: orange;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        $(function () {
            //创建小方块的jquery对象
            var $box = $("#box");
            //创建小方块的鼠标点按下事件
            $box.on('touchstart', function (e) {
                //获取鼠标按下的时候左侧偏移量和上侧偏移量
                var touch = e.originalEvent.targetTouches[0];
                var old_left = touch.pageX; //左侧偏移量
                var old_top = touch.pageY; //竖直偏移量

                //获取鼠标的位置
                var old_position_left = $(this).position().left;
                var old_position_top = $(this).position().top;

                //鼠标移动
                $box.on('touchmove', function (e) {
                    var touch = e.originalEvent.targetTouches[0];
                    var new_left = touch.pageX; //新的鼠标左侧偏移量
                    var new_top = touch.pageY; //新的鼠标竖直方向上的偏移量

                    //计算发生改变的偏移量是多少
                    var chang_x = new_left - old_left;
                    var change_y = new_top - old_top;

                    //计算出现在的位置是多少

                    var new_position_left = old_position_left + chang_x;
                    var new_position_top = old_position_top + change_y;
                    //加上边界限制
                    if (new_position_top < 0) { //当上边的偏移量小于0的时候，就是上边的临界点，就让新的位置为0
                        new_position_top = 0;
                    }
                    //如果向下的偏移量大于文档对象的高度减去自身的高度，就让它等于这个高度
                    if (new_position_top > $(document).height() - $box.height()) {
                        new_position_top = $(document).height() - $box.height();
                    }
                    //右限制
                    if (new_position_left > $(document).width() - $box.width()) {
                        new_position_left = $(document).width() - $box.width();
                    }
                    if (new_position_left < 0) { //左边的偏移量小于0的时候设置 左边的位置为0
                        new_position_left = 0;
                    }

                    $box.css({
                        left: new_position_left + 'px',
                        top: new_position_top + 'px'
                    })
                });
                $box.on('touchend', function () {
                    $(this).off("mousemove");
                })
            });
        })
    </script>

</body>

</html>