Question

在我的HTML代码中我有一个标签我希望这个标签在滚动时始终可见，因为我添加了一个java脚本函数来执行此操作。这是我的js函数：

if ($(window).width() < 991) {
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
    $('#alwaysvisible').addClass('stick');
    $('#sticky-anchor').height($('#alwaysvisible').outerHeight());
            } else {
                $('#alwaysvisible').removeClass('stick');
                $('#sticky-anchor').height(0);
            }
        }


        $(function () {
            $(window).scroll(sticky_relocate);
            sticky_relocate();
        });
    }

html

     <div class="col-lg-3 col-md-1 col-xs-1">
                                <div class="sides_margin sides_margin2">
                                    <div id="sticky-anchor"></div>
                                    <div id="alwaysvisible" class="rblk col-lg-12 col-md-12 col-xs-12 col-sm-12 categoriesWrapper">
                                        <div class="btitle ">
                                            <div class="bg"></div>
                                            <div class="px"></div>
                                            <div class="padd categories"><h4 class="visible-lg categoriesh4">{{'categories'|trans }}</h4></div>
                                        </div>
                                        <div id="scrollablediv" class="categoryListWrapper">
                                            <ul>
                                                {% for category in catArray %}                
                                                    <li><a href="{{ category.link|raw }}" title="{{ category.name|raw }}">{{ category.name|raw }}</a></li>                          
                                                    {% endfor %}
                                            </ul>
                                        </div>
                                        {% for whereis in whereisAll%} 
                                            <div class="btitleWhereis margintop10 hidden-md hidden-xs hidden-sm">
                                                <a class="whereislink" href="{{ whereis.link|raw }}" title="{{ whereis.name|raw }}">
                                                    <div class="bg"></div>
                                                    <div class="px"></div>
                                                    <div class="padd categories"><h4 class="visible-lg categoriesh4">{{ whereis.name|raw }}</h4></div>
                                                </a>
                                            </div>
                                        {% endfor %}

                                    </div>
                                </div>
           </div>

CSS

#alwaysvisible.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 10;
float: right;
padding-left: 0;
width: 10%;
padding-right: 10px; 
}

但问题是我在标签内容中有很多内容，固定位置并没有显示所有内容，我试图在滚动上添加一个新类并给内容溢出-y：滚动但是它不起作用（内容不再可见）所以我应该做什么才能使它工作，内容滚动是最好的解决方案？或者他们是实现这一目标的最佳方式？

提前致谢

在固定的可分割选项卡内滚动

0 个答案: