Кнопка Fade in в определенной точке прокрутки

Question

Пожалуйста, ответьте на этот вопрос из двух частей. У меня есть эта кнопка, которая прокручивается до определенной точки и открывает div. Следующий код делает то, что мне нужно

<button onclick="myFunction()" id="FilterResults" class="FilterResults">Filter Results</button>

var x = document.getElementById('filterresults');

function myFunction(){
    if (x.style.display === 'block'){
        x.style.display = 'block';
    } else {
        x.style.display = 'block';
    }
    $('html, body').scrollTop($('#up').offset().top);
}

Что мне нужно добавить, так это чтобы кнопка появлялась / исчезала в определенной точке прокрутки, у меня есть следующий код для появления / исчезновения, но я Я не уверен, как объединить две части кода вместе

$(function () {
$(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
        $('.FilterResults').fadeIn();
    } else {
        $('.FilterResults').fadeOut();
    }
});

css

 #FilterResults {
   display: none;
   position:fixed;
   bottom:10px;
   left:100px;
   font-size:16px;
   text-align:center;
   outline: none;
   z-index:9999;
   border: none;
   background-color: #4399fc;
   color: white;
   cursor: pointer;
   padding: 6px;
   border-radius: 4px;
}

Любая помощь с благодарностью

Джейсон

Проблема в том, что я НЕ знаю, как добавить оба набора кода вместе, так что это один полный код (если вы понимаете, о чем я).