Javascript 如何使用带'；的按钮，使用函数更改DIV的背景色；如果'；条件

我的问题可能有点模糊，但这是我现在的问题

我需要More按钮在每次单击orange background按钮时将背景颜色更改为橙色，并且仅当Morediv仍位于屏幕底部时（单击“More”按钮时，它会向上滑动）

还有我的一些代码片段：

<script>

$(document).ready(function(){
 $('.chatbox').hide();
    $('#btn-chat').click(function() {
        $("#blk-collaboration .chatbox").slideToggle("slow",function(){
        $("#blk-collaboration #toggle").css("background","transparent");
    });
      $(this)//this is a button DOM element. wrapping in jQuery object.
      .toggleClass('wide'); // removing wide class so button became smaller.
    });
});

function changeColor(color) {
document.getElementById("circle").style.backgroundColor = color;
}

document.getElementById("online").onclick = function() { changeColor("#92bf1e"); }
document.getElementById("offline").onclick = function() { changeColor("#747474"); } 
document.getElementById("upcoming").onclick = function() { changeOrange("#f4b066"); } 



</script>

$（文档）.ready（函数（）{
$（'.chatbox'）.hide（）；
$（“#btn聊天”）。单击（函数（）{
$（“#blk collaboration.chatbox”）.slideToggle（“slow”，function（）{
$（“#blk collaboration#toggle”）.css（“背景”、“透明”）；
});
$（this）//这是一个按钮DOM元素。包装在jQuery对象中。
.toggleClass（'wide'）；//删除wide类，使按钮变小。
});
});
功能更改颜色（颜色）{
document.getElementById（“圆圈”）.style.backgroundColor=颜色；
}
document.getElementById（“online”）.onclick=function（）{changeColor（“#92bf1e”）；}
document.getElementById（“脱机”）.onclick=function（）{changeColor（“#747474”）}
document.getElementById（“即将推出”）.onclick=function（）{changeOrange（“#f4b066”）}

这是按钮

<input id="online" type="button" value="Online" />
<input id="offline" type="button" value="Offline" />
<input id="upcoming" type="button" value="Orange Background" />

我一直在想办法，但是更多

按钮的颜色仍然会改变，即使它已经向上滑动了
 将此添加到$（文档）中。准备好了吗

工作示例
要做到这一点，请在changeColor功能下面添加以下内容：

function changeOrange(color) {
 if ($('#btn-chat').hasClass('wide'))
     document.getElementById("btn-chat").style.backgroundColor = color;
}

如果背景已经是橙色，并且“更多”按钮向上移动，背景是否应该变回蓝色？
检查条件
$（“#blk collaboration.chatbox”）。是否（'：visible'）
是否切换了更多。这里我使用变量
tempbooth
来检查More div

试试这个问题

var tempBottom=true;

function changeColor(color) {
    document.getElementById("circle").style.backgroundColor = color;
    }
function changeOrange(color) {
    if(tempBottom==true){
    $('.wide').css("background-color", "#f4b066");
    }
}
    document.getElementById("online").onclick = function() { changeColor("#92bf1e"); }
    document.getElementById("offline").onclick = function() { changeColor("#747474"); } 
    document.getElementById("upcoming").onclick = function() { changeOrange("#f4b066"); } 

        $(document).ready(function(){
     $('.chatbox').hide();
        $('#btn-chat').click(function() {
            $("#blk-collaboration .chatbox").slideToggle("slow",function(){
            $("#blk-collaboration #toggle").css("background","transparent");
                if( $("#blk-collaboration .chatbox").is(':visible')){
                    tempBottom=false;}else
                    { tempBottom=true;
                    }
        });
          $(this)//this is a button DOM element. wrapping in jQuery object.
          .toggleClass('wide'); // removing wide class so button became smaller.
        });
    });

在你的情况下，这里是如何做到这一点

$("#upcoming").on("click", function(){  

    // check if 'More' button's position is in between 100px from the bottom
   if( ($("#toggle").offset().top >= ($(window).scrollTop() + $(window).height() - 100))) {

      // change the color        
      $("center").css("background", "#eebe57");

   }    

}); 


（滚动到Javascript部分的底部！）
@Kenny:您的解决方案在更改背景颜色之前不会检查“更多”按钮是否已上移。如果“宽”与橙色同义，而“不宽”与蓝色同义，则只需更改css指令，使颜色更改与宽度更改同步。Javascript保持不变，但可以整理。并将“宽”改为“窄”（CSS、HTML、Javascript），因为就目前而言，“宽”是窄的，而不是“宽”是宽的。很快你就会想要将“多”改为“少”。
$("#upcoming").on("click", function(){  

    // check if 'More' button's position is in between 100px from the bottom
   if( ($("#toggle").offset().top >= ($(window).scrollTop() + $(window).height() - 100))) {

      // change the color        
      $("center").css("background", "#eebe57");

   }    

});