Question

好的，所以我正在开发一个餐厅应用程序设计，希望能够在“现在提供的早餐”块下面贴上类别名称的标签，然后向下滚动到我希望的下一个类别将类别名称选项卡替换为当前的选项卡。

类似于Instagram在滚动新闻源时如何使用用户名选项卡。

关于javascript可以做到这一点的任何想法？

Answer 1

以下是代码：

function stickyTitles(stickies) {

    this.load = function() {
        
        stickies.each(function() {
            
            var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
            thisSticky.parent().height(thisSticky.outerHeight());
            
            jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
            
        });
    }
        
    this.scroll = function() {
    
        stickies.each(function(i) {
            
            var thisSticky = jQuery(this),
                nextSticky = stickies.eq(i+1),
                prevSticky = stickies.eq(i-1),
                pos = jQuery.data(thisSticky[0], 'pos');
        
            if (pos <= jQuery(window).scrollTop()+100) {
                
                thisSticky.addClass("fixed");
                
                if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
                    
                    thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());

                }
                
            } else {
                
                thisSticky.removeClass("fixed");
                
                if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {
                
                    prevSticky.removeClass("absolute").removeAttr("style");
                
                }               
            }
        });         
    }
}

jQuery(document).ready(function(){

    var newStickies = new stickyTitles(jQuery(".followMeBar"));
    
    newStickies.load();
        
    jQuery(window).on("scroll", function() {

        newStickies.scroll();
    
    }); 
});

body {
  margin: 0;
  background: #333;
  color: #fff;
}
.followMeBar {
  background: #222;
  border-bottom: solid 1px #111;
  border-top: solid 1px #444;
  padding: 1%;
  position: relative;
  z-index: 1;
}
.followMeBar.fixed {
  position: fixed;
  top: 100px;
  width: 98%;
  z-index: 0;
}
.followMeBar.fixed.absolute {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="followMeBar">a</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">b</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">c</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">d</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">e</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">f</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">g</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">h</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">i</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">j</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">k</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">l</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">m</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">n</div>

我修改了一下，因为我看到你的标题有一些偏移量（我会用内容包装器id更改你的div上边距顶部的<br>）

Answer 2

如果我理解你的问题，下拉选择菜单的实际位置是浏览器的功能，无法直接更改。

或者，你看过bootstrap吗？

您可以使用以下方法创建漂亮的下拉菜单：

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div>
            <form>
                <div class="btn-group">
                    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </form>
        </div>
    </body>
</html>

＆＃13;

更新忘了在bootstrap中添加滚动功能： http://getbootstrap.com/javascript/#scrollspy

我相信这将实现您的目标。

还有很多其他框架，但这个框架非常棒。

制作标签贴在Div的顶部

2 个答案: